CODEWITHSUNDEEP
javascriptcss
Liam
Liam

Reputation: 9855

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

Upvotes: 1

Views: 1392

Answers (7)

soufell
soufell

Reputation: 66

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

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 78046

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

Upvotes: 0

Chris Snowden
Chris Snowden

Reputation: 5002

If you have jQuery:

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

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

Upvotes: 0

Matthew Scharley
Matthew Scharley

Reputation: 132534

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

Upvotes: 3

Semyazas
Semyazas

Reputation: 2101

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

Upvotes: 0

Digital Plane
Digital Plane

Reputation: 38294

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

Upvotes: 0

Adam MacDonald
Adam MacDonald

Reputation: 1958

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

Upvotes: 1

Related Questions