|
Javascript function to toggle divs on or off |
||||||||
Ever needed to display far more information on one page than will reasonably fit, but want all related parts of a series of pages to appear 'grouped'?
I encountered a need to be able to fill in several forms, all relating to the same data object, but with no possible way of displaying them all on the same page, so I thought I'd use divs to hide and show the content.
2// do toggle event
3// iState = (1 visible, 0 hidden)
4function toggleBox(DivID, iState)
5 {
6 //Netscape fix
7 if(document.layers)
8 {
9 document.layers[DivID].visibility = iState ? "show" : "hide";
10 }
11 //NN6 + IE 5+
12 else if(document.getElementById)
13 {
14 var obj = document.getElementById(DivID);
15 obj.style.visibility = iState ? "visible" : "hidden";
16 }
17 // IE 4
18 else if(document.all)
19 {
20 document.all[DivID].style.visibility = iState ? "visible" : "hidden";
21 }
22 }
This JavaScript function will show or hide the div that you pass in. It accepts the div Id, and the state of the div (1 or 0).
So I could show or hide a div with this. But I wanted many divs to toggle over each other. So for example, if I have four divs I set the status of them individually, this will show div no '1', but hide all others. I've repeated this function for each div, you can probably pass it in the id and do it dynamically too.
2 {
3 toggleBox('tab1',1);
4 toggleBox('tab2',0);
5 toggleBox('tab3',0);
6 toggleBox('tab4',0);
7 }
The divs themselves are made using a style:
2<!--
3
4.tab1 {color:#000000; background-color:#cccccc; layer-background-color:#cccccc;
5 position:absolute; top:100px; left:100px; width:480px; height:280px;
6 z-index:100; visibility:hidden; border:thin; border-style:solid; border-color:#000099; border-width:thin;}
7</style>
And the code to call the div, with the corresponding button.
2<div id="tab1" class="tab1">1</div>
This will action the 'actiondiv1' method. Now just replicate that a few times, and you've got multiple divs overlaid, that are actioned with a click!
You can view a full example here.
Acquisition of the study and academics is soft for the prospective endeavors and skills. It is http://www.best-dissertations.org/ implemented on real and solid grounds and impact is relished. The ramifications are ensured and promoted.
