4 replies to this topic

[RHochstenbach]

Have you ever wanted to create an HTML page with multiple pages or with elements that can be switched with the click of a button? This can be achieved easily with the help of JavaScript.

In my example I will use three DIV elements: Box1, Box2 and Box3. I want Box1 to be displayed by default.

In your head tag I start with creating the CSS for these three elements. To make it easier for you to see, I'll give each DIV element a different border color.

Put this in your HEAD element.

<style type="text/css">

#box1 {

border: 3px solid blue;

display: block;

}

#box2 {

border: 3px solid green;

display: none;

}

#box3 {

border: 3px solid orange;

display: none;

}

</style>

Alternatively you could use these inline, using the style= property of the DIV elements.
Now we need the Javascript code, which also goes into the HEAD element.

<script type="text/javascript">

<!--


function visibility_switch(id) {


    /* If the ID of box1 is passed, hide the IDs of the other boxes */

    if(id == 'box1') {

    	document.getElementById('box1').style.display = "block";

    	document.getElementById('box2').style.display = "none";

    	document.getElementById('box3').style.display = "none";

    	

    }

    

	 /* If the ID of box2 is passed, hide the IDs of the other boxes */

	if(id == 'box2') {

    	document.getElementById('box2').style.display = "block";

    	document.getElementById('box1').style.display = "none";

    	document.getElementById('box3').style.display = "none";

    	

    }

    

     /* If the ID of box3 is passed, hide the IDs of the other boxes */

    if(id == 'box3') {

    	document.getElementById('box3').style.display = "block";

    	document.getElementById('box1').style.display = "none";

    	document.getElementById('box2').style.display = "none";

    	

    }

    

}

    

//-->

</script>

You can change the ID names and add/remove statements if necessary. Basically you want to make the selected element visible and the other elements invisible.

Now it's time to create the buttons (hyperlinks) to control the DIV elements. Put this in the BODY element.

<a href="#" onclick="visibility_switch('box1');">Box 1</a> | <a href="#" onclick="visibility_switch('box2');">Box 2</a> | <a href="#" onclick="visibility_switch('box3');">Box 3</a>

Each hyperlink passes the name of the corresponding DIV element to the JavaScript function.

And finally adding the DIV elements to the page in the BODY element:

<div id="box1">

Contents of Box 1

</div>


<div id="box2">

Contents of Box 2

</div>


<div id="box3">

Contents of Box 3

</div>

If someone has another approach, please add them to this thread ;)

[bbqroast]

Would it not be more effective to have a 'container' div holding box1 and then change its 'inner HTML' to box2 and box3 when required?
Just thinking about browser compatibility, as some might not understand your CSS display (even though they all should).

Complete JS newbie here so don't bite to hard.

[Ajay Kini]

thanks for the share.....!!! indeed a nice one

[Waheed Murad]

nice sharing........ thanks for it

[zapdude1234]

Good Tutorial! The toggling the display of a Div tag is VERY important. I agree switching the html might be better in this situation but I feel like if the pages contain large amounts of info than it might be better to toggle the display.
Im new to JS too tho so thats just a guess!