DevPapers - article Showing and hiding a div

Have you ever wondered how to show different content when different buttons are clicked? In this tutorial you'll find out how.

In the head of your page place the following:

<script type="text/javascript">
function show_div(div_id) {
    // hide all the divs
    document.getElementById('the_div_1').style.display = 'none';
    document.getElementById('the_div_2').style.display = 'none';
    document.getElementById('the_div_3').style.display = 'none';

    // show the requested div
    document.getElementById(div_id).style.display = 'block';
}
</script>

Place this in your page between the <body> and <body> tags:

<a href="" onclick="show_div('the_div_1'); return false;">Div 1</a>
<a href="" onclick="show_div('the_div_2'); return false;">Div 2</a>
<a href="" onclick="show_div('the_div_3'); return false;">Div 3</a>

This will display three links, one for each div. Clicking one of these links will show the relevant div and hide the others.

Then you can place the actual divs anywhere in your page using:

<div id="the_div_1">This is div 1</div>
<div style="display: none;" id="the_div_2">This is div 2</div>
<div style="display: none;" id="the_div_3">This is div 3</div>

You'll notice the second and third divs have a CSS style setting of display:none. This hides them when the page is first loaded, and the first div is displayed. These are displayed accordingly when the links are clicked.

The possibilities for using this are endless. Enjoy!