Question

I have this code :

<div class="box_container">
    <div class="box_container_button" id="navigator_1">
        Button 1
    </div>

    <div class="box_container_button" id="navigator_2">
        Button 2
    </div>

    <div class="box_container_button" id="navigator_3">
        Button 3
    </div>

    <div class="box_container_content" style="background-color:#d5d5d5;" id="navigator_content_1">
        Content 1               
    </div> 

    <div class="box_container_content" style="background-color:#00aeef; display:none;" id="navigator_content_2">
        Content 2              
    </div>

    <div class="box_container_content" style="background-color:#4db848; display:none;" id="navigator_content_3">
        Content 3               
    </div>               
</div>

If I press on the button with navigator_2, navigator_content_1 must be hidden, and navigator_content_2 showed.

How can I do this with prototype? (Or javascript if it’s too stronger). Unfortunatly I can’t use jQuery.

Answer 1

Try this

function nav(obj)
{
    document.getElementById("navigator_content_1").style.display = "hidden"
    document.getElementById("navigator_content_2").style.display = "hidden"
    document.getElementById("navigator_content_3").style.display = "hidden"

    obj.style.display = "none";
}

Add onclick="nav(this)" to each button element.