SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: Show - hide script?
-
Mar 3, 2003, 05:21 #1
- Join Date
- Jul 2001
- Location
- London, UK
- Posts
- 475
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Show - hide script?
Does anyone know how i could use a show - hide script on my website in order to show or hide the menu?
I have a menu system integrated into my site - www.hostcompanies.com its a really cool menu but maybe be better if i could have a show/hide button on it.
The menu is generated using iNaviagte which script is on each page so i need to keep the menu in the same code of the page in order to keep the iNavigate generator working properly when i update or change the menu.
The menu is inside a table - i would like to show/hide the entire table - this would give more room to show the page contents.
Ideally i would like the menu to show when visiting the page but to be able to hide it when needed.
Does anyone know of a script that could do this?Last edited by TimNiceButDim; Mar 3, 2003 at 05:27.
Add your web design / hosting companies to my directory - Web Hosting Directory
Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).
-
Mar 4, 2003, 15:53 #2
- Join Date
- Aug 2001
- Location
- Los Angeles, CA
- Posts
- 346
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What this page has is called a menu tree script.
My menu tree is much simpler, and the code is below:
Code:<html> <head> <script language="JavaScript"> function open(theobj) { var obj = document.getElementById(theobj); var opener = document.getElementById("i" + theobj); if(obj.style.display == "none" ) { obj.style.display = "block"; opener.innerHTML = "-"; } else { obj.style.display = "none"; opener.innerHTML = "+"; } } function openall() { var objarray = document.getElementsByTagName("span" ); for (var i=0; i < objarray.length; i++) { objarray[i].style.display = "block"; document.getElementById("i" + objarray[i].id).innerHTML = "-"; } } function closeall() { var objarray = document.getElementsByTagName("span" ); for (var i=0; i < objarray.length; i++) { objarray[i].style.display = "none"; document.getElementById("i" + objarray[i].id).innerHTML = "+"; } } </script> <style> a.sign { text-decoration:none; font-size:18px; font-family:arial; color:blue; } a.link { text-decoration:none; font-size:15px; font-family:arial; margin-left:15px; color:blue; } a.openclose { text-decoration:none; color:blue; font-size:15px; font-family:arial; } </style> <BODY bgcolor="#cccccc"> <H3 align="center">YOURSITE.COM</H3> <A href="javascript<IMG alt=:o src="images/smilies/redface.gif" border=0 smiliecode=":o">pen('scripts');" id="iscripts" class="sign">+</A> Scripts<BR> <span id="scripts" style="display:none;"> <A href="Your_URL_here" class="link"> JavaScript Scripts </A><BR> <A href="Your_URL_here" class="link"> Dynamic HTML Scripts </A><BR> <A href="Your_URL_here" class="link"> Other Scripts </A><BR> </span> <A href="javascript<IMG alt=:o src="images/smilies/redface.gif" border=0 smiliecode=":o">pen('tutorials');" id="itutorials" class="sign">+</A> Tutorials<BR> <span id="tutorials" style="display:none;"> <A href="Your_URL_here" class="link"> HTML Tutorials </A><BR> <A href="Your_URL_here" class="link"> CSS Tutorials </A><BR> <A href="Your_URL_here" class="link"> JavaScript Tutorials </A><BR> <A href="Your_URL_here" class="link"> Dynamic HTML Tutorials </A><BR> <A href="Your_URL_her " class="link"> Other Tutorials </A><BR> </span> <A href="javascript<IMG alt=:o src="images/smilies/redface.gif" border=0 smiliecode=":o">pen('support');" id="isupport" class="sign">+</A> Support<BR> <span id="support" style="display:none;"> <A href="Your_URL_here" class="link"> FAQs </A><BR> <A href="Your_URL_here" class="link"> Forums </A><BR> <A href="Your_URL_here" class="link"> Scripting Support </A><BR> <A href="Your_URL_here" class="link"> Technical Help </A><BR> </span> <A href="javascript<IMG alt=:o src="images/smilies/redface.gif" border=0 smiliecode=":o">pen('contact');" id="icontact" class="sign">+</A> Contact us<BR> <span id="contact" style="display:none;"> <A href="Your_URL_here" class="link"> Email Us </A><BR> <A href="Your_URL_here " class="link"> Phone and Address </A><BR> <A href="Your_URL_here " class="link"> Forums </A><BR> </span> <BR> <A href="javascript<IMG alt=:o src="images/smilies/redface.gif" border=0 smiliecode=":o">penall();" class="openclose">Open all</A> | <A href="java script:closeall();" class="openclose">Close all</A> </div> </BODY> </html>
Code:if(obj.style.display == "none" ) { obj.style.display = "block";
Code:if(obj.style.display == "none" ) { closeall(); obj.style.display = "block";
Last edited by gregc; Mar 4, 2003 at 15:58.
-
Mar 4, 2003, 15:57 #3
- Join Date
- Jul 2001
- Location
- London, UK
- Posts
- 475
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Its ok i have had a custom script made. Now my menu system works with a show and hide button for the naviagation.
You can see the result at http://www.hostcompanies.com/newnav.htm
Thanks for all your help anyhowAdd your web design / hosting companies to my directory - Web Hosting Directory
Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).
Bookmarks