Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    15
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question small problem with Simple menu (showHide)

    hi
    I'm using this script for a simple collapsible menu. It works great except when the class begins as "show" on a page, in which case the menu takes two clicks to hide the menu. It is as if on the first click the script is setting "show" to "show", and then only on the second click to "hide" as desired.

    Sorry if this is a novice question, I'm only just starting.

    thanks ian

    Code:
    <script language="JavaScript" type="text/JavaScript">
    <!--
    menu_status = new Array();
    
    function showHide(theid){
        if (document.getElementById) {
        var switch_id = document.getElementById(theid);
    
            if(menu_status[theid] != 'show') {
               switch_id.className = 'show';
               menu_status[theid] = 'show';
            }else{
               switch_id.className = 'hide';
               menu_status[theid] = 'hide';
            }
        }
    }
    
    //-->
    </script>
    and here's the div tag:

    Code:
    <a onclick="showHide('mymenu2')">programs</a>
    
        <div id="mymenu2" class="show">
            <span class="submenu">
    		<a href="earn.html">earn-a-bike</a>
            	<a href="rentals.html">rentals</a>
    		<a href="volunteer.html">volunteering</a>
    		<a href="donate.html">donations</a>
    	</span>
    
        </div>
    and finally the link to it all in action if you desire,
    - link.
    Last edited by ian_iam; 10-18-2008 at 06:02 PM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,078
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow Try this ...

    Add in head:
    PHP Code:
    var Smenu = ['mymenu2','mymenu3'];
    function 
    InitShow() {
      for (
    i=0i<Smenu.lengthi++) {
        var 
    IDS Smenu[i];
        
    document.getElementById(IDS).style.display 'none';
      }

    Then in body:
    PHP Code:
    <body onload="InitShow()"
    That way, if JS is not enabled, the submenus will show anyway.

  • Users who have thanked jmrker for this post:

    ian_iam (10-22-2008)

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    15
    Thanks
    6
    Thanked 0 Times in 0 Posts

    still working on it...

    thanks jmrker,
    i put that code in, but unfortunately still having the same little bug... it's just that when the menu starts open on a page, for some reason it takes two clicks to hide it, weird.

    thanks all.

    best ian

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .show{
      display:block;
    }
    
    .hide{
      display:none;
    }
    /*]]>*/
    </style><script language="JavaScript" type="text/JavaScript">
    <!--
    
    function showHide(theid){
        if (document.getElementById) {
        var switch_id = document.getElementById(theid);
            if(switch_id.className != 'show') {
               switch_id.className = 'show';
            }else{
               switch_id.className = 'hide';
            }
        }
    }
    
    //-->
    </script></head>
    
    <body>
    <a onclick="showHide('mymenu2')">programs</a>
    
        <div id="mymenu2" class="show">
            <span class="submenu">
    		<a href="earn.html">earn-a-bike</a>
            	<a href="rentals.html">rentals</a>
    		<a href="volunteer.html">volunteering</a>
    		<a href="donate.html">donations</a>
    	</span>
    
        </div>
    </body>
    
    </html>
    or
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .show{
      display:block;
    }
    
    .hide{
      display:none;
    }
    /*]]>*/
    </style><script language="JavaScript" type="text/JavaScript">
    <!--
    menu_status = new Array();
    
    function showHide(theid){
        if (document.getElementById) {
        var switch_id = document.getElementById(theid);
            if (!menu_status[theid]) menu_status[theid] = 'show';
            if(menu_status[theid] != 'show') {
               switch_id.className = 'show';
               menu_status[theid] = 'show';
            }else{
               switch_id.className = 'hide';
               menu_status[theid] = 'hide';
            }
        }
    }
    
    //-->
    </script></head>
    
    <body>
    <a onclick="showHide('mymenu2')">programs</a>
    
        <div id="mymenu2" class="show">
            <span class="submenu">
    		<a href="earn.html">earn-a-bike</a>
            	<a href="rentals.html">rentals</a>
    		<a href="volunteer.html">volunteering</a>
    		<a href="donate.html">donations</a>
    	</span>
    
        </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    ian_iam (10-22-2008)

  • #5
    New Coder
    Join Date
    Oct 2008
    Posts
    15
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Smile thank you!

    problem solved! I used your first solution, I actually already had the css style in an external style sheet. But I really liked how you cleaned up the jscript code! I guess I didn't need to be using menu_status, just className.. thanks for the help. you rock.
    ian


  •  

    Tags for this Thread

    Posting Permissions

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