Classic Div Toggle, ...with a twist I can't seem to figure out... |
Classic Div Toggle, ...with a twist I can't seem to figure out... |
Duchess |
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? |
Christian J |
Jan 8 2010, 09:47 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
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', ''); |
Lo-Fi Version | Time is now: 18th April 2024 - 02:08 AM |