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 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    31
    Thanks
    19
    Thanked 0 Times in 0 Posts

    How to make a collapsible sub-menu stay open?

    Hello everyone.

    I am struggling with a little problem with a collapsible menu I am working with.

    You can see the menu here:
    http://www.divine-dsign.com/VinnuverndSida/index.php

    Now I need the links (the dd's) that fold out to stay open once you click its header (dt's). For example if you try clicking the redbutton where it says HEILSUVERND (the same site opens but will be an under site in time) that sub-menu should stay open for the page that opens.

    Can I do this??

    This is my menu javascript:
    Code:
    function show(thisDT){
    var thisDD=thisDT.nextSibling;
    while(thisDD.nodeName!='DD'){
    thisDD=thisDD.nextSibling;
    }
    var allDD=thisDD.parentNode.getElementsByTagName('dd'), i=0, dd;
    while(dd=allDD[i++]){
    dd.style.display=dd==thisDD?'block':'none';
    }
    }
    and this is my html:
    Code:
    <div id="menuBox">
    <dl id="menu">
    		<dt><a href="#" style="color:#FFFFFF">Um Vinnuvernd</a></dt>
    		<dt onclick="show(this);"><a href="heilsuvernd.php" class="style1" id="menuImg" style="color:#FFFFFF">Heilsuvernd</a></dt>
    			<dd>
    				<ul>
    					<li><a href="#">sub-menu 2.1</a></li>
    					<li><a href="#">sub-menu 2.2</a></li>
    					<li><a href="#">sub-menu 2.3</a></li>
    				</ul>
    			</dd>	
    		<dt onclick="show(this);return false"><a href="#" id="menuImg2" style="color:#FFFFFF">Vinnuvernd</a></dt>
    			<dd>
    				<ul>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    				</ul>
    			</dd>
    		<dt onclick="show(this);return false"><a href="#" id="menuImg3"  style="color:#FFFFFF">Heilsuefling</a></dt>
            <dd>
    				<ul>
    					<li><a href="#" target="_blank">sub-menu 4.1</a></li>
    					<li><a href="#">sub-menu 4.2</a></li>
    					<li><a href="#">sub-menu 4.3</a></li>
    				</ul>
    		</dd>	
                	<dt onclick="show(this);return false"><a href="#"  style="color:#FFFFFF">Einstaklingar</a></dt>
            <dd>
    				<ul>
    					<li><a href="#" target="_blank">sub-menu 4.1</a></li>
    					<li><a href="#">sub-menu 4.2</a></li>
    					<li><a href="#">sub-menu 4.3</a></li>
    				</ul>
    		</dd>
                    	<dt onclick="show(this);return false"><a href="#" style="color:#FFFFFF">English version</a></dt>
                        <dd>
    				<ul>
    					<li><a href="#" target="_blank">sub-menu 4.1</a></li>
    					<li><a href="#">sub-menu 4.2</a></li>
    					<li><a href="#">sub-menu 4.3</a></li>
    				</ul>
    			</dd></dl>
    		<dl id="menu2">
            <dt onclick="show(this);return false"><a href="#"></a></dt>
            		<dd>
    				<ul>
    					<li><a href="http://www.ferdavernd.is" target="_blank">ferdavernd.is</a></li>
    					<li><a href="#">s.535-7700</a></li>
    				</ul>
    			</dd>	
    </dl>
    Can anyone help with this?
    All the best,
    Figurine

  • #2
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    I use a similar expanding script in a couple of places - let me dig it out and see if I can adapt it to your cause

  • Users who have thanked Mikebert4 for this post:

    Figurine (07-31-2008)

  • #3
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    Here we go:

    Code:
    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';
     }
     }
    }
    To get it to work it'll require a slight recoding, namely my script runs off element Id's

    you also need to define two css classes:

    Code:
    .show { display: block; }
    .hide {display: none; }
    try a restructure like this:

    Code:
    <dt onclick="showhide(sub_menu_1);"><a href="heilsuvernd.php" class="style1" id="menuImg" style="color:#FFFFFF">Heilsuvernd</a></dt>
    
    <dd id="sub_menu_1">
    				<ul>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    				</ul>
    			</dd>
    let me know how you fare!

  • Users who have thanked Mikebert4 for this post:

    Figurine (07-31-2008)

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    31
    Thanks
    19
    Thanked 0 Times in 0 Posts
    that was fast! Thanks.

    The code seems logical to me but I can't seem to make it work.

    I've put it up on these sites:
    http://divine-dsign.com/VinnuverndSida/heilsuvernd.php and
    http://divine-dsign.com/VinnuverndSida/vinnuvernd.php (so I can click from Vinnuvernd to Heilsuvernd...and see if it stays open

    But now it doesn't open at all...I must be doing something wrong.

    I saved the javascript like this
    Code:
    
    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';
     }
     }
    }
    
    function show(thisDT){
    var thisDD=thisDT.nextSibling;
    while(thisDD.nodeName!='DD'){
    thisDD=thisDD.nextSibling;
    }
    var allDD=thisDD.parentNode.getElementsByTagName('dd'), i=0, dd;
    while(dd=allDD[i++]){
    dd.style.display=dd==thisDD?'block':'none';
    }
    }
    so that the rest of the links work. I also tried doing it with only your code but it's still the same.

    Any ideas what I might be doing wrong?

    What about some kind of an onLoad stay open function do you think something like that would work?

    Best,
    Figurine
    Last edited by Figurine; 07-31-2008 at 11:21 AM.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,533
    Thanks
    3
    Thanked 512 Times in 499 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <link href="http://www.divine-dsign.com/VinnuverndSida/AllVinnuStyle.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript" type="text/javascript">
    <!--
    function show(thisDT){
    var thisDD=thisDT.nextSibling;
    while(thisDD.nodeName!='DD'){
    thisDD=thisDD.nextSibling;
    }
    var allDD=thisDD.parentNode.getElementsByTagName('dd'), i=0, dd;
    while(dd=allDD[i++]){
    dd.style.display=dd==thisDD?'block':'none';
    }
    }
    //-->
    </script>
    </head>
    <body onload="show(document.getElementById('menu').getElementsByTagName('DT')[1])">
    <div id="menuBox">
    <dl id="menu">
    		<dt><a href="#" style="color:#FFFFFF">Um Vinnuvernd</a></dt>
    		<dt onclick="show(this);"><a href="heilsuvernd.php" class="style1" id="menuImg" style="color:#FFFFFF">Heilsuvernd</a></dt>
    			<dd>
    				<ul>
    					<li><a href="#">sub-menu 2.1</a></li>
    					<li><a href="#">sub-menu 2.2</a></li>
    					<li><a href="#">sub-menu 2.3</a></li>
    				</ul>
    			</dd>
    		<dt onclick="show(this);return false"><a href="#" id="menuImg2" style="color:#FFFFFF">Vinnuvernd</a></dt>
    			<dd>
    				<ul>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    				</ul>
    			</dd>
    		<dt onclick="show(this);return false"><a href="#" id="menuImg3"  style="color:#FFFFFF">Heilsuefling</a></dt>
            <dd>
    				<ul>
    					<li><a href="#" target="_blank">sub-menu 4.1</a></li>
    					<li><a href="#">sub-menu 4.2</a></li>
    					<li><a href="#">sub-menu 4.3</a></li>
    				</ul>
    		</dd>
                	<dt onclick="show(this);return false"><a href="#"  style="color:#FFFFFF">Einstaklingar</a></dt>
            <dd>
    				<ul>
    					<li><a href="#" target="_blank">sub-menu 4.1</a></li>
    					<li><a href="#">sub-menu 4.2</a></li>
    					<li><a href="#">sub-menu 4.3</a></li>
    				</ul>
    		</dd>
                    	<dt onclick="show(this);return false"><a href="#" style="color:#FFFFFF">English version</a></dt>
                        <dd>
    				<ul>
    					<li><a href="#" target="_blank">sub-menu 4.1</a></li>
    					<li><a href="#">sub-menu 4.2</a></li>
    					<li><a href="#">sub-menu 4.3</a></li>
    				</ul>
    			</dd></dl>
    		<dl id="menu2">
            <dt onclick="show(this);return false"><a href="#"></a></dt>
            		<dd>
    				<ul>
    					<li><a href="http://www.ferdavernd.is" target="_blank">ferdavernd.is</a></li>
    					<li><a href="#">s.535-7700</a></li>
    				</ul>
    			</dd>
    </dl>
    <body>
    
    </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/

  • The Following 2 Users Say Thank You to vwphillips For This Useful Post:

    Figurine (07-31-2008), Mikebert4 (07-31-2008)

  • #6
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    I didn't realise you wanted it to persist accross pages, sorry.

    I think an onLoad may indeed be the way forward,

    my code basically generates an array of the names of all the menu items currently expanded - you can loop through that array to have the state persist, somthing like:

    Code:
    function menuPersist()
    {
    var i = 0;
    while (i <= menu_status.length)
    {
      if(document.getElementById(menu_status[i])
      {
        document.getElementById(menu_status[i]).class = "show";
      }
      i++;
    }
    }
    so you write all your elements out with class="hide", and then call menuPersist onLoad.

    As for transfering the state, I'd be temped to use php over javascript - either pass the contents of menu_state in the URL and use $_GET[] or define the array as a session variable or session cookie...

  • Users who have thanked Mikebert4 for this post:

    Figurine (07-31-2008)

  • #7
    New Coder
    Join Date
    Jul 2008
    Posts
    31
    Thanks
    19
    Thanked 0 Times in 0 Posts
    I tried vwphillips suggestion and it works like a charm!

    Really appreciate your help guys!
    THANKS ***

    Figurine

  • #8
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    Aye - very neat vwPhillips

  • #9
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    I have a simpler version if you're going to just use the onclick event handler:
    Code:
    function showHide(el_id){
         curr = document.getElementById(el_id).style;
         document.getElementById(el_id).style = (curr == 'block'?'none':'block');
    }
    I find it to be simpler and you may be able to modify it with some of vwphillips' code to avoid the id's this would be put into action the same as vwphillips':
    Code:
    function showHide(thisDT){
         var curr = thisDT.nextSibling;
         thisDT.nextSibling.style = (curr.style == 'block'?'none':'block');
    }


  •  

    Posting Permissions

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