The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Classic Div Toggle, ...with a twist I can't seem to figure out...
Duchess
post Jan 6 2010, 04:26 PM
Post #1





Group: Members
Posts: 5
Joined: 6-January 10
Member No.: 10,781



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Christian J
post Jan 8 2010, 09:47 AM
Post #2


.
********

Group: WDG Moderators
Posts: 6,087
Joined: 10-August 06
Member No.: 7



You're welcome! smile.gif

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', '');


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Duchess
post Jan 8 2010, 12:42 PM
Post #3





Group: Members
Posts: 5
Joined: 6-January 10
Member No.: 10,781



QUOTE(Christian J @ Jan 8 2010, 09:47 AM) *
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', '');


Ooo... that looks fun. smile.gif I'll give it a go.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 1st October 2014 - 01:16 PM