Classic Div Toggle, ...with a twist I can't seem to figure out... Options

[Duchess]

I have the following:

CODE

function showdiv(name,focus){
var obj = (document.getElementById)? document.getElementById(name) : eval("document.all[name]");
    if (obj.style.display=="none"){
        obj.style.display="";
    }else{
        obj.style.display="none";
    }
}

<div align="left"><a onClick="showdiv('div1');" style="cursor: pointer;">DIV 1</a></div>
<div id="div1" style="display: none;">DIV CONTENT</div>

<div align="left"><a onClick="showdiv('div2');" style="cursor: pointer;">DIV 2</a></div>
<div id="div2" style="display: none;">DIV CONTENT</div>

This is the classic JavaScript solution to toggling a div, and it handles multiple divs. It works fine.

What I'm trying to do is advance it a level by making it so only one div shows at a time. In otherwords, I click the link, it shows the div. I click it again, it goes away. This works. I click that link again, it shows the div again. I click the other link now, the first div goes away and the second div shows up instead. So on and so forth.

I tried doing this:

CODE

function showdiv(name1,name2,focus){
var obj1 = (document.getElementById)? document.getElementById(name1) : eval("document.all[name1]");
var obj2 = (document.getElementById)? document.getElementById(name2) : eval("document.all[name2]");
    if (obj2.style.display==""){
        obj2.style.display="none";
    }
    if (obj.style.display=="none"){
        obj.style.display="";
    }else{
        obj.style.display="none";
    }
}

<div align="left"><a onClick="showdiv('div1,div2');" style="cursor: pointer;">DIV 1</a></div>
<div id="div1" style="display: none;">DIV CONTENT</div>

<div align="left"><a onClick="showdiv('div2,div1');" style="cursor: pointer;">DIV 2</a></div>
<div id="div2" style="display: none;">DIV CONTENT</div>

Is this just too simple to be true?

[Christian J]

You're welcome!

Here's an idea that adds links instead of buttons. Use it instead of the button section in the script above.

CODE

// make toggle link
if(div[i].firstChild.nodeName!='A')
{
    var a=document.createElement('a');
    a.setAttribute('href', '#show_or_hide_contents');
    a.appendChild(div[i].firstChild);
    div[i].insertBefore(a, div[i].firstChild);
}

you may also want add a "return false" in the onclick to cancel the link's HREF:

CODE

div[i].onclick=function()
{
    toggle(this);
    return false;
}

By using "return false" like this you may even leave the HREF blank:

CODE

a.setAttribute('href', '');