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,630 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> |
Duchess |
Jan 7 2010, 09:57 AM
Post
#3
|
Group: Members Posts: 5 Joined: 6-January 10 Member No.: 10,781 |
First, thank you very much for your reply and help.
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. Could be. I had gotten this off another tutorial about two years ago for a different site I was working on. I figured, since it worked, why reinvent the wheel? The tutorial might have been rather old. The 'focus' argument was in that. CODE <div class="toggle">DIV 1 <div>DIV CONTENT 1</div> </div> <div class="toggle">DIV 2 <div>DIV CONTENT 2</div> </div> I'm curious here about the nested divs. Do I really need the double tags here? Seems rather redundant to someone still learning. This post has been edited by Duchess: Jan 7 2010, 09:57 AM |
Christian J |
Jan 7 2010, 11:37 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
I'm curious here about the nested divs. Do I really need the double tags here? Seems rather redundant to someone still learning. I guess there are several ways to do it, but you'll at least need one element for the content you want to show/hide, and another for the clickable "label". You don't have to use DIV elements for this, many other elements might do as well (a definition list, perhaps?). Also you don't have to nest them, e.g. you could use a clickable heading followed by a text paragraph that's shown/hidden. Of course any such changes to the HTML require rewriting of the script as well. |
Lo-Fi Version | Time is now: 29th March 2024 - 11:59 PM |