Toggle Div Javascript

Question

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_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

Unless you're writing this code for some EXTREMELY specific application environment, there's no reason to support anything before IE 6 (IE4, IE5, netscape etc). Most applications don't even support IE6. — zatatatata
– zatatatata, Commented Jul 27, 2011 at 13:36

Matthew Scharley · Accepted Answer · 2011-07-27 13:38:16Z

3

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()"

answered Jul 27, 2011 at 13:38

Matthew Scharley

133k55 gold badges199 silver badges225 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam MacDonald · Accepted Answer · 2011-07-27 13:36:19Z

1

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

answered Jul 27, 2011 at 13:36

Adam MacDonald

1,95815 silver badges19 bronze badges

Comments

Digital Plane · Accepted Answer · 2011-07-27 13:37:10Z

0

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

answered Jul 27, 2011 at 13:37

Digital Plane

38.4k7 gold badges60 silver badges59 bronze badges

Comments

Semyazas · Accepted Answer · 2011-07-27 13:37:19Z

0

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

answered Jul 27, 2011 at 13:37

Semyazas

2,10114 silver badges14 bronze badges

Comments

Chris Snowden · Accepted Answer · 2011-07-27 13:38:52Z

0

If you have jQuery:

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

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

answered Jul 27, 2011 at 13:38

Chris Snowden

4,9921 gold badge27 silver badges34 bronze badges

Comments

SeanCannon · Accepted Answer · 2011-07-27 13:38:56Z

0

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

answered Jul 27, 2011 at 13:38

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Comments

soufell · Accepted Answer · 2011-07-27 13:41:24Z

0

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

answered Jul 27, 2011 at 13:41

soufell

663 bronze badges

Collectives™ on Stack Overflow

Toggle Div Javascript

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related