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 7 2010, 08:22 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,660 Joined: 10-August 06 Member No.: 7 |
CODE function showdiv(name,focus) The "focus" argument doesn't seem to be used for anything. QUOTE CODE var obj = (document.getElementById)? document.getElementById(name) : eval("document.all[name]"); That looks terribly ancient, I recall document.all was necessary for IE4. Today "all" browsers support document.getElementById. QUOTE 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 rewrote both the script and the HTML. This way it's meant to work with any number of DIVs. Haven't tested it much, though. I don't use link elements for the labels, since such links tend to annoy users without javascript, instead I create BUTTON elements (with javascript) so that users can open the DIVs with their keyboard too (not just the mouse). If you don't like the look of buttons you might change their appearance with CSS. The script must appear after the DIVs. CODE <div class="toggle">DIV 1 <div>DIV CONTENT 1</div> </div> <div class="toggle">DIV 2 <div>DIV CONTENT 2</div> </div> <script type="text/javascript"> function toggle(parent) { for(var i=0; i<div.length; i++) { if(div[i].className=='toggle') { // make toggle button: if(div[i].firstChild.nodeName!='BUTTON') { var button=document.createElement('button'); button.setAttribute('type', 'button'); button.appendChild(div[i].firstChild); div[i].insertBefore(button, div[i].firstChild); } var child=div[i].getElementsByTagName('div')[0]; // mark the parent of an opened DIV: div[i].state=''; if(child.style.display=='block') { div[i].state='open'; } child.style.display='none'; div[i].onclick=function() { toggle(this); } } } if(parent) { var child=parent.getElementsByTagName('div')[0]; if(child.style.display=='none' && parent.state!='open') { child.style.display='block'; } else { child.style.display='none'; } } } var div=document.getElementsByTagName('div'); toggle(); </script> |
kit |
Jun 16 2011, 03:03 AM
Post
#3
|
Group: Members Posts: 2 Joined: 16-June 11 Member No.: 14,773 |
This works beautifully. Thank you!
Is there a way to show the contents of div 1 from the start, before any of the buttons or links are clicked? |
kit |
Jun 16 2011, 08:30 AM
Post
#4
|
Group: Members Posts: 2 Joined: 16-June 11 Member No.: 14,773 |
I entered the first div without the toggle class above the rest so it appears at the start. Thank you again.
|
Lo-Fi Version | Time is now: 26th April 2024 - 07:48 PM |