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>
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.
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.