Toggle Div Javascript

I have some divs on my page that when a link is clicked they need to toggle (show/hide)

JS

var state = 'none';

function showhide(layer_ref) {
//alert(eval( "document.all." + layer_ref + ".style.display") == "none")

if (document.all) { //IS IE 4 or 5 (or 6 beta)
if(eval( "document.all." + layer开发者_Python百科_ref + ".style.display") == "none"){
eval( "document.all." + layer_ref + ".style.display = 'block'");
}else{
eval( "document.all." + layer_ref + ".style.display = 'none'");
}

}
if (document.layers) { //IS NETSCAPE 4 or below
if(document.layers[layer_ref].display == none){
document.layers[layer_ref].display = "block";
}else{
document.layers[layer_ref].display = "none";
}
}
if (document.getElementById &&!document.all) {
if(document.getElementById(layer_ref).style.display == "none"){
document.getElementById(layer_ref).style.display = "block";
}else{
document.getElementById(layer_ref).style.display = "none";
}
}
}

HTML

     <div class="faq-row" style="z-index: 976;">
       <span class="itp-title"><a href="#" onclick="showhide('div1');">title</a></span>
        <div id="div1" style="display: none;">divcont</div>
     </div>
     <div class="faq-row" style="z-index: 976;">
       <span class="itp-title"><a href="#" onclick="showhide('div1');">title</a></span>
        <div id="div2" style="display: none;">divcont</div>
     </div>
     <div class="faq-row" style="z-index: 976;">
       <span class="itp-title"><a href="#" onclick="showhide('div1');">title</a></span>
        <div id="div3" style="display: none;">divcont</div>
     </div>

my problem is that no matter what link i click it only toggles the first div? Cany anybody see where im going wrong? Thanks

Your first issue is trying to write non-trivial crossbrowser JavaScript. This would be much, much simpler if you used something like jQuery.

That said, your issue is that your onClick handlers are all pointing to the same id.

onclick="showhide('div1');"

Change these to the relevant div id's and you should be fine.

If you used something like jQuery, this function would be irrelevant though and you could just do something like:

onclick="$('#div1').toggle()"

You have showhide(div1) for each of the showhide events .. that should read div2 and div3

EDIT: also, another show/hide may be this ...

function showhide(elementid){
obj=document.getElementById(elementid);
obj.style.display=(obj.style.display=='none')?(''):('none');    
}//both 

You're calling "showhide('div1');" on every onclick event. Try changing them to "showhide('div1');", "showhide('div2');", and "showhide('div3');".

You're always calling showhide('div1'). On every div's onclick

If you have jQuery:

function showhide(element) {
    $(element).toggle();
}

would be much simpler of course. Is jQuery an option?

Here's how we do it in 2011 ;)

$('.itp-title').click(function(){
    $(this).next().toggle();
});

Working demo: http://jsfiddle.net/AlienWebguy/rcr38/

Learn this: http://jquery.com

You have to call showHide() with each div id. here is a live example http://toggle-example.qip.li/edit/