SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    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 ).

  2. #2
    SitePoint Addict
    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>
    If you want to only have one menu list open at a time, re-write this part of the code:

    Code:
    if(obj.style.display == "none" ) {
    	obj.style.display = "block";
    To this:

    Code:
     if(obj.style.display == "none" ) {
    	closeall();
    	obj.style.display = "block";
    Last edited by gregc; Mar 4, 2003 at 15:58.

  3. #3
    SitePoint Evangelist
    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 anyhow
    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 ).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •