Show and Hide

One common requirement for web pages these days is to be able to have one of several sections of your web page showing while all but that one section are hidden. Your visitor then takes some action such as selecting a different tab that you have displayed in the page in order to hide the currently visible section and to display a different section in its place.

We can actually set this up to work quite simply. The way we will do it is to give each of the sections its own id that we will use to make it visible and give all of the sections from which we want only one visible at a time the same class. In order to make sure that whichever of the sections was previously visible disappears when a new section displays we will first hide everything that has that class and then show the one that has the id.

Let's look at a simple example of how to set up your HTML first before we look at the script that will make this work for us.

<div id="a1" class="red one">11111</div>
<div id="a2" class="one">22222</div>
<div id="a3" class="one">33333</div>
<div id="a4" class="one red">44444</div>

I have made this sample HTML just about as simple possible just to illustrate what you need to have in the HTML in order for this script to work. Each of the divs has a different id (a1 through a4) and a common class (one). You can of course use whatever names for your ids and class that you want to use since what you use will be what you pass to the JavaScript to perform the processing. I have even shown two of the divs where a second class is to be applied since this script will work regardless of how many classes you have assigned.

The next thing we need is the JavaScript and you just need to copy the following function and attach it into your web page just before the </body> tag ready to use it.

function showHide(id,cl) {
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = document.getElementsByTagName('body')[0].getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) elem[i].style.display = 'none' ;
if (id) document.getElementById(id).style.display = 'block';

In order to only show the first div when the page first loads you will need to call this function once at the start. Simply pass the id you want to display first and the class and all of the sections apart from the one with the id will be hidden.


Alternatively pass an empty string in place of the id and all of the sections will start out hidden.

Now all you need is to add the appropriate showHide() calls where ever you want to change which of the sections is showing on your page. Here's a working example where the section to be displayed is determined by which of the four numbers you last passed the mouse over.

1 | 2 | 3 | 4

You can of course set up multiple showHide sections all on the one web page simply by giving each group of sections a different class.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow