Show and hide sections using click or mouse over

If you have a page, where you want to show or hide certain sections, depending on the user's choices/clicks on various buttons and headlines, you have a couple of ways of doing this. Like a lot of other parts of web design, the choice in solution is a matter of personal preferences and the nature of the job, so you don't have standard solution that works for all jobs.

This is one of the preferred solutions, the last couple of years. The method has the advantage of being incredibly simple and easy to use, and it works across the various platforms. It used to be mouse over effects that was used a lot, but since tablets and smartphones don't have a mouse, this has become a poor solution, and web designs are switching to on click solutions.

If you need something completely simple, where you have a button for toggling show/hide, the quick solution is a small JavaScript, that looks like this:


After this, we just need something to click, here we use a button:



It can just as well be an image or a link or some third object instead, should you want that.

The last part we need is the element to be shown and hidden. I could be something like a DIV, where we start with the DIV being hidden:



Like the item being clicked, the section can be almost any tag you like. The finished result now looks like this:



A solution like one shown above isn't very elegant for purposes where you want some kind of visual indicator. You can extend the script, if you want to, so you have different styles for show and hide, e.g. different colors, but it quickly becomes complicated compared to the next version, with a more pragmatic approach.


If you use two buttons instead of one, each with their own function, you can split the show/hide function up in separate parts, which makes the coding a lot less cluttered. It could be something like this:



Here we have a button that starts with bing visible, and when clicked, it becomes hidden, and the other button and the section becomes visible. When clicking the button which is visible now, it becomes hidden, along with the section, and the first button becomes visible again. On the screen, it looks like this:



Both solutions can do the same. The choice between one or the other is therefore a matter of personal preferences and which code is the easiest to write and update.

The use of ONMOUSEOVER used to be popular for drop-down and slide-out menus. Today the us of mouse over is becoming limited, as tablets and smartphones have no mouse, and when tablets and smartphones try to convert a click on a mouse over area to a real ONCLICK command, it doesn't always end well.

But let's have a look at how to make it work anyway.

to get the effect, you need and object to place the mouse (cursor) over. It may be an image or a text string or some other thing . Here we use a DIV. Der skal også være noget at vise. This is usually sub-menus for the navigation pane, but that is by no means the only option. Here we use an image.

First we create a DIV with text:



We also need an image to show at mouse over. Since we don't want it to be shown until the cursor is over the text, it has to start with being hidden, so we ad a STYLE="display:none". Then the code looks like this:



To show the object, we use getElementById(), but that means the image needs an ID. This we specify as Logo:



So, when the cursor is over the text, we have to show the object with ID="Logo". Then it looks like this:



This is where you have to be a bit aware. This was what happens when the cursor is over the text. What about when the cursor is no longer over the text? Therefore you have to remember to specify ONMOUSEOUT. Here we want the image to disappear again. Then the code looks like this:



On the screen, it looks like this:

Show and hide using radiobuttons has the advantage of the system only allowing one active selection, i.e. only the selected section is shown and the rest is hidden. It is a fine way of keeping the user interface easier to read, when the users are clicking around. In terms of programming, it resembles checkboxes, but there is a few important details, so you can't just do a copy/paste.

The solution consists of three parts:

1. Radiobuttons, i.e. a FORM, from which to select from
2. The section to be shown and hidden
3. A JavaScript for connecting the clicks with sections

In the solution shown here, it will be a general solution, so you only need one script for multiple sets of radiobuttons.

The first thing we do is creating our radiobuttons. We use the tag FORM, and at click on a button, we execute the function ShowRadioButtonDiv, using the two values GroupName and 3. What those two are all about, we'll get back to. Then the code looks like this:


Detail about how to do various things with radiobuttons can be seen here, if you want to.


The JavaScript needed looks like this:


In the example on this page, the JavaScriptet is placed in the HEAD tag, as it is only used once. If you need it more than once, as the script design suggests, you would normally do this as an external script.

What the script does is taking the two values GroupName and 3 and use them as the first part of the identification name to be searched for and a specification of the number of buttons, respectively. If you only use radiobuttons once, you would normally remove the variable NumberOfButtons and just write (x=1;x<=3;x++) in the script (and only write ONCLICK="ShowRadioButtonDiv('GroupName')" in the form).

After this, the script goes through the radiobuttons belonging together (same NAME attribute). If it has been clicked/selected, the selection going with it is shown, and otherwise it is hidden. This is why the names have been selected the way they are. There is a base name, IdBaseName, on which the numbers 1 to the number of radiobuttons, i.e. 3, is added, so the routine looks for the IDs GroupName1, GroupName2, etc. This is the list called CheckThisButton. The other list is CheckThisButton on which Div has been added, so the content is GroupName1Div, GroupName2Div, etc. Now the two sets of names are following each other, so if the radiobutton with ID="GroupName1" is clicked, the DIV having ID="GroupName1Div" is shown, and so forth.


This brings us to the last part: The sections to be shown and hidden. Here we use a DIV, but is may as well be any other tag, and it doesn't have to be the same tag, i.e. you can have the first as a table, the second as a DIV and the third as a list. The system selects by the attribute ID alone.

The code for the three DIVs used as sections, looks like this:



The finished result looks like this on the screen:

Checkboxes is basically a variation of ID and ONCLICK, but instead of buttons, you have a checkbox for marking selected or not. If you have a lot of fields to be shown and hidden, then checkboxe is a graphically more readable solution than a lot of buttons, but really, checkboxes have no functionality that that cannot be done using buttons as shown at the top of the page. In terms of programming, they resemble radiobuttons, but there is a few important deviations, so you cannot just do a copy/paste.

The solution consists of three parst:

1. Checkboxes, i.e. a FORM, to choose from
2. Sections to be shown and hidden
3. A JavaScript connecting clicks and sectiones

The solution shown here, is a general solution, so you can use one script for multiples sets of checkboxes.

The first thing to do is creating the checkboxes. We use the tag FORM, and on click on a button, we execute the function ShowCheckboxDiv, with the two values BoxName and 3. What this is all about we'll get back to. Then the code looks like this:


Note that since the checked checkboxes are not dependent on each other, you don't need the NAME attribute for checkboxes.

The JavaScript you need, looks like this:


In the example on this page, the JavaScript is placed in the HEAD tag, as it is only used this once. If you need to use it more than once, as the example suggests, you would normally use an external script.

What the script does is having the two values BoxName and 3 respectively working as the first part of the identification name to be searched for, and a specification of the number of buttons, If you only use checkboxes this once, you would normally remove the variable NumberOfBoxes and just write for (x=1;x<=3;x++) in the script.

After this the script parse all tags on the page, looking for the requested ID. If the ID is found, the routine checks to see if the checkbox is checked or not. If yes, the section that goes with the ID is shown, otherwise it is hidden. This is why the names have been chosen the way they are. It is a basic name, IdBaseName, on which the number from 1 to the number of checkboxes, i.e. 3 in this case, so it looks for the IDs BoxName1, BoxName2, etc. That is the list named CheckThisBox. The other list is CheckThisBox on which a Div has been added, giving them the name BoxName1Div, BoxName2Div, etc. Now the two sets of names follow each other, so if the checkbox with ID="BoxName1" is checked, the DIV having ID="BoxName1Div" is shown, and so forth.


This brings us to the last part: The sections to be shown and hidden. Here we use a DIV, but is may as well be any other tag, and it doesn't have to be the same tag, i.e. you can have the first as a table, the second as a DIV and the third as a list. The system selects by the attribute ID alone.

The code making up the three DIVs representing sections, will look like this:



The final result looks like this on the screen: