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, 03:27 PM
Post
#3
|
Group: Members Posts: 5 Joined: 6-January 10 Member No.: 10,781 |
Okay. I can understand that.
If you don't like the look of buttons you might change their appearance with CSS. This is apparently the fun part. The buttons clash horribly with the template and the links looked much better. So, now that we've made them into buttons, how do I change them back to looking like links? So far, Google's turned up results for actual 'input' buttons for forms or how to make text links look like buttons, unless I'm searching badly. I tried a few and ended up with some odd results. This post has been edited by Duchess: Jan 7 2010, 03:28 PM |
Christian J |
Jan 7 2010, 05:56 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
now that we've made them into buttons, how do I change them back to looking like links? Like this? CODE button { border: 0; text-decoration: underline; color: #00f; background: #fff; cursor: pointer; } Or you could simply remove the part of the script that creates the buttons, since it's clicking the parent DIV (and its content) that actually makes things happen. I'd rather keep the BUTTON elements though, since that enables keyboard navigation. |
Lo-Fi Version | Time is now: 30th March 2024 - 03:03 AM |