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

Solution 1:

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

Solution 2:

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

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

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

Solution 3:

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

Solution 4:

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

Solution 5:

If you have jQuery:

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

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