I've got a small javascript script that displays or hides text by clicking on the appropriate part, it's very similar to a collapsible drop-down menu. However,by default the text gets shown, and i'm not clued up with javascript enough to change it so that the text is hidden by default Can anyone help me in this regard? text is below: <html> <head> <title></title> <script type="text/javascript"> function toggle(button,area) { var tog=document.getElementById(area); if(tog.style.display) { tog.style.display=""; } else { tog.style.display="none"; } button.innerHTML=(tog.style.display)?'>>':'<<'; } </script> </head> <body> Blah: <span id="menu" style=""> blah | blah | blah </span> <span class="" onclick="toggle(this,'menu');" title="Click to show/hide"><<</span> </body> </html> HTML: The main aim with this is to keep the text within the 'menu' span so that it is spiderable - I may end up using this for a horizontal menu. If you save that code as an HTML file and view it, you can show or hide the text by clicking on the ">>" or "<<" Any help is appreciated
There are two solutions to your current problem. First one is to set the display to 'none' for menu and change the text << to >> Lines 22-25 <span id="menu" style="display:none;"> blah | blah | blah </span> <span class="" onclick="toggle(this,'menu');" title="Click to show/hide">>></span> Code (markup): Alternately, you can call the function toggle() on the load even of the window. For this you'll have to give an id to the button. Replace 'button_id' below with the id you have given for the button toggle(document.getElementById('[color=red]button_id[/color]', 'menu')); Code (markup): I prefer the first solution.
Ok, i've encountered a bug I wasn't expecting. The CMS basically takes that bit of code and dispalys it on the top and bottom of the page. No problem, except that if I click on the first button, only that row is affected. If I click on any of the other buttons, however, only the arrow heads change. Plus, it expands/contracts the first row! (but it doesn't change the first button's arrow) <html> <head> <title></title> <script type="text/javascript"> function toggle(button,area) { var tog=document.getElementById(area); if(tog.style.display) { tog.style.display=""; } else { tog.style.display="none"; } button.innerHTML=(tog.style.display)?'>>':'<<'; } </script> </head> <body> Blah: <span id="menu" style="display:none;"> blah | blah | blah </span> <span class="" onclick="toggle(this,'menu');" title="Click to show/hide">>></span> <br><br> Blah: <span id="menu" style="display:none;"> blah | blah | blah </span> <span class="" onclick="toggle(this,'menu');" title="Click to show/hide">>></span> </body> </html> HTML: As u can image, it looks rather stupid Does anyone know of a way to fix this? I thought of calling them different names, however as the CMS takes this code and echos it out twice i cant think of a way to do that
The problem is that both the span elements are having the same id 'menu'. You will have to give them different ids and change the toggle function accordingly. <html> <head> <title></title> <script type="text/javascript"> function toggle(button,area) { var tog=document.getElementById(area); if(tog.style.display) { tog.style.display=""; } else { tog.style.display="none"; } button.innerHTML=(tog.style.display)?'>>':'<<'; } </script> </head> <body> Blah: <span id="menu1" style="display:none;"> blah | blah | blah </span> <span class="" onclick="toggle(this,'menu1');" title="Click to show/hide">>></span> <br><br> Blah: <span id="menu2" style="display:none;"> blah | blah | blah </span> <span class="" onclick="toggle(this,'menu2');" title="Click to show/hide">>></span> </body> </html> Code (markup):
Try this modified toggle function. I have replaced the second parameter from the function and retrieves it using the previous sibling property. So even the id name is optional (see, i've removed it). <html> <head> <title></title> <script type="text/javascript"> function toggle(button) { var tog=button.previousSibling; if(tog.style.display) { tog.style.display=""; } else { tog.style.display="none"; } button.innerHTML=(tog.style.display)?'>>':'<<'; } </script> </head> <body> Blah: <span style="display:none;"> blah | blah | blah </span> <span class="" onclick="toggle(this);" title="Click to show/hide">>></span> <br><br> Blah: <span style="display:none;"> blah | blah | blah </span> <span class="" onclick="toggle(this);" title="Click to show/hide">>></span> </body> </html> Code (markup):
Ah, many thanks for the help It works perfectly in IE, however in Fx it doesn't, and gives the error (via the Web Developer extension) "tog.style has no properties"
This will work in IE, Firefox and Opera. Sorry, I didn't check the previous code . function toggle(button) { var tog=PreviousSibling(button); alert(button+'|'+tog.id); if(tog.style.display) { tog.style.display=""; } else { tog.style.display="none"; } button.innerHTML=(tog.style.display)?'>>':'<<'; } function PreviousSibling(node){ node=node.previousSibling; while(node.nodeType != 1){ node = node.previousSibling; } return node; } Code (markup):
ah, deary me, you'll probably hate me for this... Got warning boxes in IE and Fx. The menu expands/contract perfectly though. After you click the ok button (Fx 2.0.0.2 and IE 6 SP2)
I'm so sorry, remove line no 3. ie alert(button+'|'+tog.id); Code (markup): I put it for testing the code and forgot to remove it It will be working fine. I have tested it. Still, incase it is not working, feel free to reply