| Launch Radio | Flip Skins |
 |
 |
|
|
Showing and Hiding Divisions
Sometimes you might want to allow users to collapse and expand sections of your page. You may do this to save space or to keep the area of the main content constant while changing the actual content as they click from link to link. We're going to check out a basic example of a collapsible divsion that the user can toggle on and off.
Let's create our division first.
<div id="MyMainDiv" style="visibility:visible; display:">
Notice that we had to specify both the "visibility" and "display" styles. This is to ensure cross-browser functionality. Also, note that for the display attribute a blank value indicates "visible".
Now let's write the function that toggles the div on and off.
This is my main div content </div>
function ToggleDiv(DivName)
Finally, we need to call this function from a link as shown in the code sample and example below.
{ var MyDiv = document.getElementById(DivName); if ((MyDiv.style.display == "") || ( MyDiv.style.visibility == "visible")) { MyDiv.style.display = "none"; MyDiv.style.visibility = "hidden"; } else { MyDiv.style.display = ""; MyDiv.style.visibility = "visible"; } }
<a href="#" onClick="ToggleDiv('MyMainDiv'); return(false);">Toggle Division On & Off</a>
Click Here to Toggle This Div On & Off
|
||
 |
 |