Hide/show elements with javascript

just did it on jsfiddle http://jsfiddle.net/6EGT2/. first create a function to show and hide divs

function hideDiv(divid)
{
    document.getElementById(divid).style.visibility= 'hidden';
}

function showDiv(divid)
{
    hideDiv('div1');
    hideDiv('div2');
    hideDiv('div3');
    document.getElementById(divid).style.visibility = '';
}

now html:

<input type='button' value ='button1' onclick='showDiv("div1")'>
<input type='button' value ='button2' onclick='showDiv("div2")'>
<input type='button' value ='button3' onclick='showDiv("div3")'>

<div id='div1'>content 1</div>
<div id='div2'>content 2</div>
<div id='div3'>content 3</div>

A few notes:

• You need to watch for the click event on whatever needs to be clicked
• When clicked, you can determine which div should be shown. visibility: hidden or display: none
• Make sure the javascript is executing after the html elements have loaded, otherwise it won't assign the click handlers etc.

Here's one way to do it with plain javascript that uses common code for each button, no javascript in your HTML and data attributes:

HTML:

<div id="buttonContainer">
<button data-content="content1">Content 1</button>
<button data-content="content2">Content 2</button>
<button data-content="content3">Content 3</button>
</div>

<div id="contentContainer">
<div id="content1">Showing Content 1</div>
<div id="content2">Showing Content 2</div>
<div id="content3">Showing Content 3</div>
</div>

Javascript:

var buttons = document.querySelectorAll("#buttonContainer button");

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
        var contentItem = this.getAttribute("data-content");
        var contents = document.querySelectorAll("#contentContainer div");
        for (var j = 0; j < contents.length; j++) {
            contents[j].style.display = "none";
        }
        document.getElementById(contentItem).style.display = "block";
    });
}

Working demo: http://jsfiddle.net/jfriend00/rcDXX/

Explanation:

1. Create a div that contains the buttons.
2. Create a div that contains the various content areas.
3. Create CSS rules that show/hide the content for the appropriate starting state.
4. Put a data attribute on each button that tells you which content area it should show so you can use generic code for all the buttons.
5. Get all the buttons into a nodeList.
6. Set a click event handler on each button.
7. In that click handler, get the content id that should be shown for that button.
8. Hide all the content areas by setting their style to style.display = "none"
9. Show the desired content area.

FYI, here's a little more advanced version of the code that uses a helper function: http://jsfiddle.net/jfriend00/aqMLt/

It seems like you're toggling the visibility of the button and not the content. What is the ID of your content div?

provided:

<div id="containerDiv">
    <div id="div1">blahblah</div>
    <div id="div2">blahblah</div>
    <div id="div3">blahblah</div>
</div>

Then just set the buttons to go to a function like "toggleVisibility". I tested this and it will work from IE 5.5 and later, Firefox, Chrome 1.0 and Safari.

function toggleVisibility( id ){

    var containerDiv = document.getElementById("containerDiv");
    var innerDivs = containerDiv.getElementsByTagName("DIV");

    for(var i=0; i<innerDivs.length; i++)
    {
        if ( i == id ){
            innerDivs[i].style.visibility = "visible";
            innerDivs[i].style.display = "";
        }
        else{
            innerDivs[i].style.visibility = "hidden";
            innerDivs[i].style.display = "none";        
        }
    }
}

toggleVisibility( 0 );