Skip to content

Collapsible Menu

Updated on 11/6/2010 because of a selector bug in jQuery 1.4.3.

A simple, yet attractive sliding menu. With jQuery, the menu can slide, fade, grow, appear and allow only one instance expanded at a time, which is where the true beauty of this script lies. The HTML is virtually identical in each example, so the sample code below only includes one of the lists. The element id needs to be modified to use the other jQuery samples. The expand and collapse icons are for expanding and collapsing all menu items.

Download

Collapsible Menu (14658)

Demo


Images

HTML

<a class="expand_all"><img src="/wp-content/uploads/2010/06/expand.gif" alt="" /></a> <a class="collapse_all"><img src="/wp-content/uploads/2010/06/collapse.gif" alt="" /></a>
<ul id="menu1" class="example_menu">
	<li><a class="expanded">Section A</a>
		<ul>
			<li><a href="#">Link A-A</a>
				<ul>
					<li><a href="#">Link A-A-A</a></li>
					<li><a href="#">Link A-A-B</a></li>
				</ul>
			</li>
			<li class="active"><a href="#">Link A-B</a></li>
			<li><a href="#">Link A-C</a></li>
			<li><a href="#">Link A-D</a></li>
		</ul>
	</li>
	<li class="footer"><span> </span></li>
	<li><a class="collapsed">Section B</a>
		<ul>
			<li><a href="#">Link B-A</a>
				<ul>
					<li><a href="#">Link B-A-A</a></li>
					<li><a href="#">Link B-A-B</a></li>
					<li><a href="#">Link B-A-C</a></li>
				</ul>
			</li>
			<li><a href="#">Link B-B</a>
				<ul>
					<li><a href="#">Link B-B-A</a></li>
					<li><a href="#">Link B-B-B</a></li>
				</ul>
			</li>
			<li><a href="#">Link B-C</a></li>
			<li><a href="#">Link B-D</a></li>
		</ul>
	</li>
	<li class="footer"><span> </span></li>
	<li><a class="collapsed">Section C</a>
		<ul>
			<li><a href="#">Link C-A</a></li>
			<li><a href="#">Link C-B</a></li>
			<li><a href="#">Link C-C</a></li>
			<li><a href="#">Link C-D</a></li>
		</ul>
	</li>
	<li class="footer"><span> </span></li>
</ul>

JavaScript

$(document).ready(function() {
	// Expand/Collapse All
	$('#example1 .expand_all').click(function() {
		$('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').slideDown('medium');
	});
	$('#example1 .collapse_all').click(function() {
		$('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').slideUp('medium');
	});
	// Slide
	$("#menu1 > li > a.expanded + ul").slideToggle("medium");
	$("#menu1 > li > a").click(function() {
		$(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> ul').slideToggle("medium");
	});

	// Fade
	$("#menu2 > li > a.expanded + ul").fadeIn("normal");
	$("#menu2 > li > a").click(function() {
		var el = $(this).parent().find('> ul');

		if($(this).hasClass("collapsed"))
			$(el).fadeIn('normal');
		else
			$(el).fadeOut('normal');

		$(this).toggleClass("expanded").toggleClass("collapsed");
	});

	// Grow/Shrink
	$("#menu3 > li > a.expanded + ul").show("normal");
	$("#menu3 > li > a").click(function() {
		$(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> ul').toggle("normal");
	});

	// Appear/Disappear
	$("#menu4 > li > a.expanded + ul").show();
	$("#menu4 > li > a").click(function() {
		$(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> ul').toggle();
	});

	// Accordion
	$("#menu5 > li > a.expanded + ul").slideToggle("medium");
	$("#menu5 > li > a").click(function() {
		$("#menu5 > li > a.expanded").not(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> ul').slideToggle("medium");
		$(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> ul').slideToggle("medium");
	});
});

CSS

.example_menu {
	font-size: 90%;
	list-style: none;
	margin: 0;
	padding: 0;
	vertical-align: top;
	width: 136px;
}
.expand_all,
.collapse_all {
        cursor: pointer;
}
.example_menu ul {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu1 li, #menu2 li, #menu3 li, #menu4 li, #menu5 li, .example_menu li {
	background-image: none;
	margin: 0;
	padding: 0;
}
.example_menu ul ul {
	display: block;
}
.example_menu ul ul li a {
	padding-left: 20px;
	width: 109px;
}
.example_menu a {
	color: #000;
	cursor: pointer;
	display: block;
	font-weight: bold;
	margin-left: 0;
	padding: 2px 2px 2px 17px;
	width: 112px;
}
.example_menu a.expanded {
	background: #bbb url('collapse.gif') no-repeat 3px 50%;
}
.example_menu a.collapsed {
	background: #bbb url('expand.gif') no-repeat 3px 50%;
}
.example_menu a:hover {
	text-decoration: none;
}
.example_menu ul a {
	background: #e8e8e8;
	border-top: 2px solid #fff;
	color: #000;
	display: block;
	font-weight: normal;
	padding: 2px 2px 2px 10px;
	width: 119px;
}
.example_menu ul a:link {
	font-weight: normal;
}
.example_menu ul a:hover {
	background : #f5f5f5;
	text-decoration: underline;
}
.example_menu li.active a {
	background: #fff;
}
.example_menu li.active li a {
	background: #e8e8e8;
}
#menu1 li.footer, #menu2 li.footer, #menu3 li.footer, #menu4 li.footer, #menu5 li.footer, .example_menu .footer {
	background: transparent url('footer.jpg') no-repeat 0 0;
	border-top: 2px solid #fff;
	height: 9px;
	line-height: 15px;
	margin: 0 0 10px 0;
	width: 131px;
}
.example_menu .footer span {
	display: none;
}
128 Comments
  1. Cristobal permalink

    excellent menus, regards.

  2. E P Alton permalink

    These look great! The “Slide” version is exactly what I was looking for.

    Well, almost. I’m going to need to add “expand/collapse all” buttons but I can probably figure that out myself. Maybe.

    Thanks for the great stuff!

    • Matthew permalink

      Good idea! I’ve updated the example to include an expand and collapse all functionality. The code could probably be optimized, but it serves its purpose and only animates where needed. Enjoy!

  3. Thnaks .. Good work

  4. Tomi permalink

    Great tutorial.

    Thank you!

  5. Nice Tuto, but I am having an issue.

    I just copy this code in my example.html

    But its not working in IE.

    Anybody have the same problem?

    Thanks

    • Matthew permalink

      Is the page accessible to the public? It’s much easier to debug code that I can see.

  6. Mirte permalink

    The ‘Appear/Disappear’ one is just right for a website I’m currently developing. I’m having some problems, though. How would this work if you’re using wp_nav_menu in WordPress? Because I’d like a dynamic menu there is no way (that I know of) to hardcode the specific classes (‘expanded’ and ‘collapsed’) to the <a> tag. How would you do such a thing?

    Thank you very much (in advance)!

  7. Bruno Oli permalink

    any chances to get this as an wordpress plugin? it would be really nice

    • Matthew permalink

      I don’t see it being necessary making it a full plugin. Its implementation is pretty simple, and depending on the result you’re looking for, you’ll add more CSS than you will JS.

  8. Alex Ueda permalink

    Hello,

    This is great work. I am working on a convoluted example of your sliding menu, with the following structure: chapter > subchapter > topic. In this example, both chapter and subchapter lists would be collapsible. So far it is successful, but I am having trouble getting the chapter list to be expanded by default on page load, and the subchapter list collapsed by default on page load. Each time I click on a collapsed chapter, it opens up all the child elements, and not simply the sub-chapter list, even though I specified the chapter and subchapter classes as “expanded” and “collapsed”, respectively. Any ideas what I might be doing wrong?

    Thanks in advance for your help, and thanks again for making this available to budding webdevs everywhere. =)

  9. Jay Hough permalink

    This is a great menu — thanks so much!! I took it one step further and modified the accordian menu so images can be used for headers of each menu.

    HTML:

    	 
    		
    			Link A-A
    			Link A-B
    			Link A-C
    			Link A-D
    		
    	
    	 
    	 
    		
    			Link B-A
    			Link B-B
    			Link B-C
    			Link B-D
    		
    	
    	 
    	 
    		
    			Link C-A
    			Link C-B
    			Link C-C
    			Link C-D
    		
    	
    	 
    	 
    		
    			Link D-A
    			Link D-B
    			Link D-C
    			Link D-D
    

    Javascript:

    $(document).ready(function() {
    	// Accordion
    	$("#menu5 > li > a.expanded + ul").slideToggle("medium");
    	$("#menu5 > li > a").click(function() {
    		$("#menu5 > li > a.expanded").not(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("medium");
    		$(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("medium");
    		var myID = ($(this).attr("id"));
    		var myClass = ($(this).attr("class"));
    		switch(myID){
    			case "products":
    				if(myClass == "expanded"){
    					$("#menu5 > li.footer1").css("display", "block");
    					$("#menu5 > li.footer2").css("display", "none");
    					$("#menu5 > li.footer3").css("display", "none");
    					$("#menu5 > li.footer4").css("display", "none");
    				} else {
    					$("#menu5 > li.footer1").css("display", "none");
    					$("#menu5 > li.footer2").css("display", "none");
    					$("#menu5 > li.footer3").css("display", "none");
    					$("#menu5 > li.footer4").css("display", "none");
    				}
    			break;
    			case "about":
    				if(myClass == "expanded"){
    					$("#menu5 > li.footer1").css("display", "none");
    					$("#menu5 > li.footer2").css("display", "block");
    					$("#menu5 > li.footer3").css("display", "none");
    					$("#menu5 > li.footer4").css("display", "none");
    				} else {
    					$("#menu5 > li.footer1").css("display", "none");
    					$("#menu5 > li.footer2").css("display", "none");
    					$("#menu5 > li.footer3").css("display", "none");
    					$("#menu5 > li.footer4").css("display", "none");
    				}
    			break;
    			case "frizz":
    				if(myClass == "expanded"){
    					$("#menu5 > li.footer1").css("display", "none");
    					$("#menu5 > li.footer2").css("display", "none");
    					$("#menu5 > li.footer3").css("display", "block");
    					$("#menu5 > li.footer4").css("display", "none");
    				} else {
    					$("#menu5 > li.footer1").css("display", "none");
    					$("#menu5 > li.footer2").css("display", "none");
    					$("#menu5 > li.footer3").css("display", "none");
    					$("#menu5 > li.footer4").css("display", "none");
    				}
    			break;
    			case "contact":
    				if(myClass == "expanded"){
    					$("#menu5 > li.footer1").css("display", "none");
    					$("#menu5 > li.footer2").css("display", "none");
    					$("#menu5 > li.footer3").css("display", "none");
    					$("#menu5 > li.footer4").css("display", "block");
    				} else {
    					$("#menu5 > li.footer1").css("display", "none");
    					$("#menu5 > li.footer2").css("display", "none");
    					$("#menu5 > li.footer3").css("display", "none");
    					$("#menu5 > li.footer4").css("display", "none");
    				}
    			break;
    		}
    	});
    });
    

    CSS:

    .example_menu {
    	font-size: 90%;
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	vertical-align: top;
    	width: 188px;
    }
    .example_menu ul {
    	display: none;
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    #menu5 li, .example_menu li {
    	background-image: none;
    	margin: 0;
    	padding: 0;
    }
    .example_menu ul ul {
    	display: block;
    }
    .example_menu ul ul li a {
    	width: 188px;
    }
    .example_menu a {
    	color: #fff;
    	cursor: pointer;
    	display: block;
    	padding: 0px 0px 11px 0px;
    	width: 188px;
    }
    .example_menu #products.expanded  {
    	background: url('nav3_on.png') no-repeat -20px;
    }
    .example_menu #products.collapsed  {
    	background: url('nav3.png') no-repeat -20px;
    }
    .example_menu #about.expanded  {
    	background: url('nav3_on.png') no-repeat -20px;
    }
    .example_menu #about.collapsed  {
    	background: url('nav3.png') no-repeat -20px;
    }
    .example_menu #frizz.expanded  {
    	background: url('nav3_on.png') no-repeat -20px;
    }
    .example_menu #frizz.collapsed  {
    	background: url('nav3.png') no-repeat -20px;
    }
    .example_menu #contact.expanded  {
    	background: url('nav3_on.png') no-repeat -20px;
    }
    .example_menu #contact.collapsed  {
    	background: url('nav3.png') no-repeat -20px;
    }
    .example_menu a:hover {
    	text-decoration: none;
    }
    .example_menu ul a {
    	background: #ffffff;
    	border-top: 1px solid #00a1dd;
    	border-left: 1px solid #00a1dd;
    	border-right: 1px solid #00a1dd;
    	color: #000;
    	display: block;
    	font-weight: normal;
    	padding: 2px 2px 2px 32px;
    	width: 151px;
    	text-decoration: none;
    }
    .example_menu ul a:link {
    	font-weight: normal;
    }
    .example_menu ul a:hover {
    	background : #ffffff;
    	text-decoration: none;
    	background: url(sparkles.png) no-repeat left top; 
    }
    .example_menu li.active a {
    	background: #ffffff;
    	background: url(sparkles.png) no-repeat left top; 
    }
    .example_menu li.active li a {
    	background: #ffffff;
    }
    #menu5 li.footer1, .example_menu .footer1, #menu5 li.footer2, .example_menu .footer2, #menu5 li.footer3, .example_menu .footer3, #menu5 li.footer4, .example_menu .footer4 {
    	background: transparent url('subnavbottom.png') no-repeat 0 0;
    	border-top: 1px solid #00a1dd;
    	height: 12px;
    	line-height: 0;
    	margin: 0 0 5px 0;
    	width: 188px;
    }
    
    • Jane permalink

      Hi there, I have tried to use this code to include image headers, but it isn’t working for me, do you have a full example of the code working I could use please… thanks so much

      • Matthew permalink

        Which part are you having trouble with? Make sure you include working images, as copying as is will not do any good without actually having images by the names specified.

    • Lawrence permalink

      Hi. Great menu! loved it.

      One qn though. I’ve incorporated subcategories in my menu and I was also able to make it expand and collapse independently as if its layered upon the main category.. My problem is that it doesn’t comply to the collapsed command as given in .

      eg of what i did..

      03 Section A
      04
      05 Link A-A
      06
      07 Link A-A-A
      08 Link A-A-B
      09
      10
      14
      15

      I made Link A-A a non-link. More like a subheader which is able to expand and collapse but i want it to collapse by default and expand only when the user clicks on it.

      I’m not sure if this is right or if i’m doing it correctly, Any advise will be greatly appreciated.

  10. Bob S permalink

    Thank you for the menu code! Is there a way you can set the Slide feature so that when you load the page, the menu starts “collapsed” instead of expanded(then collapses)?

    • Matthew permalink

      The code is expanded when the page loads, so remove that code and you’re set. It’s line 10 in the sample code above:

      $("#menu1 > li > a.expanded + ul").slideToggle("medium");
  11. Jasper permalink

    Hi,

    This doesn’t work with jQuery 1.4.3 – can you provide a fix please?

    • Matthew permalink

      There is a bug in 1.4.3 with using + in a selector. I have a working solution that I’ll post later.

  12. I’m not totally new to this but i cannot get it to work. The HTML and CSS is cut and dried. This is what i have for the js. Am I doing something wrong? It’s only live on my localhost right now.

    [code]
    $(document).ready(function() {
    // Expand/Collapse All
    $('#example1 .expand_all').click(function() {
    $('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').find('+ ul').slideDown('medium');
    });
    $('#example1 .collapse_all').click(function() {
    $('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').find('+ ul').slideUp('medium');
    });

    // Accordion
    $("#menu1 > li > a.expanded + ul").slideToggle("medium");
    $("#menu1 > li > a").click(function() {
    $("#menu1 > li > a.expanded").not(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("medium");
    $(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("medium");
    });
    });
    [code]

    • Matthew permalink

      Looks right, but there’s a bug in jQuery 1.4.3 with using + in a selector with find(). I’ll post an update later today.

  13. Hi, is it possible to expand the submenu and also execute the link to the page?

    • Matthew permalink

      It’s certainly possible but would require reworking the CSS and probably the HTML. The expand/collapse icons are background images tied to the header, but they would need to be separate so that one functions to toggle the submenu, while the other for links. A change in the UI would almost be necessary to give the user a larger area of toggling the menu, something better suited for this instead of an 11×11 image.

    • There is a way, change:

      $(‘#menu5 > li > a’).click(function() {

      in

      $(‘#menu5 > li > a’).mouseover(function() {

      then u can execute a link to a page
      <a href=”http://…..” rel=”nofollow”>Section C</a>

      • Matthew permalink

        I hadn’t considered that option, but that would work.

  14. Thanks for this!

  15. Hi,

    This is very nice article and useful.

    I have implemented this in my application. The Menu expanded status is lost in page refresh.

    Can some one let us know how to implement?

    • Matthew permalink

      The best option is to define what area needs to be expanded with your server side script. However, I do see a drawback in my design because JS is required to expand an area on page load. I will work on a revision to my script so that for those who don’t want to animate their menus on page load, an example is provided to accomplish it. In a nutshell, you can move the expanded class to the parent list element and add a CSS definition:

      li.expanded ul {
      	display: block;
      }
      
      • cat permalink

        hey, thanks for this!
        i’m pretty new to this.. i’ve added the CSS definition, but any chance you can expand on what it means to “move the expanded class to the parent list element”?

        thanks much.

        • Matthew permalink

          Add class=”expanded” to the

        • that you want expanded
  • Charles permalink

    I am still strugging to maintain expanded sections on page reload. I don’t want any section expanded until user explicits does so and maintain that stage until another section is expanded. How do I achie this as it is not clear in the above clarification? I mean it does not make much sense hard-coding class=expanded as we are not sure which section the user will expand.

    Thanks

  • Hey Matthew,

    Great Script!! I hate having to ask this, bcuz I so tried figuring it out on my own. I’m no java expert, but for years I’ve gotten by with hacking my way to desired results.

    I too have the same problem. When User navigate to another page from the menu, I would like that the new page retain the menu’s current collapsed/expanded structure, and not to reanimate on each page load.

    I added the following to the CSS sheet;
    li.expanded ul {
    display: block;
    }

    And all expanded headers are coded;

    SHOP

    Yet, the current structure does not carry over when clicking to another page. What am I missing?

    Grateful!

  • John H permalink

    Have you completed a revision to your script as you describe to prevent animation on page load, with an example on how to accomplish it? Maybe I am reading your comment incorrectly, but it seems to me the “nutshell” version would not work dynamically for any item, but must be coded for each page to be loaded.

    Also wondered if an approach with cookies has been coded?

    Thanks for any response on this!

  • Thanks for this script. But I try to achieve something but I don’t succed.

    I use example 5 en I want to use mouseover function and mouseout function in place of click function.

    What I also want is that:
    1- a class “expanded” always stay expanded (no toggle).
    2- mouseover and mouseout must only toggleClass for the a class “collapsed”

    Sorry for my poor English, but I hope you see what I mean.

    Francois

  • Curtis permalink

    Is there a way to expand a specific section by sending a variable through the url? For example, if you were to list Section A, Section B, Section C etc. on your home page and when a visitor clicks one of those links and arrives to this page whichever linked they had clicked would be expanded.

  • Curtis permalink

    I got it to work by doing adding this code:

    ——————-

    function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
    });
    return vars;
    }
    var my_var = getUrlVars()["my_var"];

    $(document).ready(function() {
    // Expand/Collapse All
    $(‘#menu3 > li.’ + my_var + ‘ > a.collapsed’).addClass(‘expanded’).removeClass(‘collapsed’).parent().find(‘> ul’).slideDown(‘medium’);
    });

    —————-

    And then by adding a class to the li and a query to the end of the link from the homepage the desired Section expands on page load.

    Section 1

    my_page.html?my_var=section_1

    • Brian permalink

      Curtis,

      I am trying to accomplish the task you describe but I am not knowledgeable of javascript. I am skilled enough to hack away at CSS and HTML to get the desired results if I have something to reference.

      So, if you have a working example of this, could you provide the complete code so I can see how it is integrated.

      What I am trying to accomplish (in case I misread what you were intending to do) is to be able to click on a href link within one frame and then have the navigation menu reload in another frame with the proper menu expanded based on the href link that was clicked in the first frame.

      Thanks in advance for any help you (or anyone else) might offer.

  • Any suggestions on having sub menus start out collapsed. The sub menu collapses and expands fine, but I am unable to have them start as a collapsed. In your example above “Link A-A” would be a sub menu or and example of what I was trying to do is below.

    A

       AA

    AAA
    AAB
    AAC

    AB

    ABA
    ABB

    • Matthew permalink

      The quickest way to accomplish this is to add the following JavaScript:

      $(document).ready(function() {
      	$('.example_menu ul ul').parent().hover(function() {
      		$(this).find('> ul').toggle();
      	});
      });
      

      And change the following CSS rule from display: block to:

      .example_menu ul ul {
      	display: none;
      }
      
      • Dave K permalink

        I can’t seem to get this to work … where exactly in the code do I need to add:

        $(document).ready(function() {
        $(‘.example_menu ul ul’).parent().hover(function() {
        $(this).find(‘> ul’).toggle();
        });
        });

        • Matthew permalink

          You can virtually put it anywhere as long as you include jQuery before it and it’s inside of

          • mira permalink

            I have a version of this in which the +/- toggle doesn’t seem to work on the sub-categories. Not sure where I slipped up, but I really can’t figure it out on my own. (Also, for some reason the above comment cuts off at “inside of….” so might just be missing that crucial bit of information).

            If you’re able to take a look it would be much appreciated. thanks!

  • ibrahim permalink

    Hello,
    You save me. I was looking for something like that.
    I will integrate it into the backend of one web site i am working on.

    Thank you

  • Hi Matt! This is super. But I need a piece of help here. Using FF 3.6 everything went a ok, when I tried with IE7, it wont work. Can you help? My website is online.
    Thanks.

    • Matthew permalink

      Are you still having your issue with IE7? If so, can you provide the url to the page in question?

  • Kristen permalink

    Hi! This menu code works beautifully, but when I try to use it in a wordpress editor, it fails to work as a collapsible menu. Any advice on how to make it work in wordpress?

    Thank you! :)

  • William permalink

    This was exactly what I was looking for. And with a few mods it is working great.
    But I have a few questions before I blow it out to my whole site.

    1. I have it set to Accordian and also set to expand Section A when you first arrive to the page. If I click on any sub menu item within Section A the animation happens again. How can I get it to stay open while still navigating in Section A?

    Make sense?

    2. I saw some comments here that mention issues with IE. Are there issues or has that been worked out? If there are issues are there workarounds? I did not see any overall compatibility statement for these drop downs. Please advise.

    Thanks so much.

    • Matthew permalink

      1. Check my comment here on how to accomplish it.

      2. I haven’t been able to produce any errors with IE, though I admit to not testing it thoroughly. It would help to get specifics on the problems.

  • This may be used on The University of North Carolina’s School of Medicine web site… :) You’d be given credit in the source with a link back here, of course.

  • Jasper permalink

    Hi,

    Hows about that fix for 1.4.3 you mentioed you’d fix?

  • Jasper permalink

    Hi,

    So is the fix is in the latest downloadable code? Or is there something I have to edit?

    Thanks.

    • Matthew permalink

      Could always download add see for yourself ;)

      Yes, it’s been updated :)

  • Jim permalink

    Nice menu. Is there an option to track the state of what menu has been collapsed. So navigating to another page any menu that was collapsed will stay collapsed? Using a cookie as an example.

    • Avinash permalink

      Yes I need to set this When I return to the page or open that page after restart – it should remember my choices – What I expanded What I collapsed.
      I think using cookie functionality will help.
      Matthew, Have you created such code?

  • Hi , i want to make a menu like on this page http://www.mainstudio.com
    ,I have made it with iframes , the meniu works , the problem is that i cannot Auheght the page , so i was thinking about put the link inside , how to make meniu to open my page.

    • Matthew permalink

      Do you have a specific reason for putting it in an iframe as opposed to including it in the body like the other code? manstudio.com’s menu is much like the accordion example above. The code I provide would need some changing as it’s fitted for menus, not content, but certainly doable and shouldn’t require iframes at all.

  • Chirs permalink

    Hi.

    Thanks very much for this. It looks like what the boss is after today.
    Tomorrow may well be a different matter.

    After a lot of bashing my head on the wall I created a script that calls the menu items from a database and populates this automatically.

    Thanks again!

    Chris

  • Kiel permalink

    Matthew, you are AWESOME! This is exactly what I was looking for.

    I am new to most of the javascript, so is it at all possible for you to e-mail me JUST the accordian JS code? I don’t really need the slide/fade/grow/ etc. options. My main goal is to try and have only a 30 – 40 line kind of code (or less if possible). I took a quick look at the code and was kind of overwhelmed, which is the only reason I’m asking for your assistance for this. If it’s too much work, no sweat, I’ll try to figure it out.

    Thanks again for such an awesome code.

    Regards,
    Kiel

  • Kiel permalink

    My apologies let me clarify what i meant in my first post:
    I am trying to make mult-tiered menu that expands on 3 levels. So in your example, the Section A, Link A-A, and Link A-A-A would all be collapsable/openable menu items. If you know how I could do that with your JS, I would greatly appreciate any help.

    Regards
    Kiel

  • Affan permalink

    hi, i made use of accordion menu in my web page..its working fine…thanks for your posting..but i am in trouble that accordion menu is refreshing each time on page load..how to avoid this…thanks in advance

  • Affan permalink

    hey man..please reply me soon. i am in need of it..how to avoid that toggle..only menu has to expand…

  • Jul permalink

    Hi, Great Menus
    Sorry i’m a total noob i have a question for you.
    What do you mean here “The element id needs to be modified to use the other jQuery samples”

    sorry i’m a noob but i can follow and learn.

    • Matthew permalink

      I strong suggest learning JavaScript in order to effectively use any kind of script. It will go a long, long way in helping you understand what you’re trying to accomplish. I’ll provide a quick example, but again, I strongly urge you to learn JavaScript as well as HTML and CSS.

      An element is any html tag item. For example:

      The element is an unsorted list with an id of menu1. Using the selector #menu1, we are able to add events, modify the element or its children or perform a number of other actions that jQuery gives us access to. I only provided the HTML for the first list because it is virtually identical to the other four examples. The only real difference is the element’s id. #example1, #example2, etc. Those are the ids of each list.

      • Ohhh ok i get it now. I guess i’m not that noob lol im taking web design classes and i know what your talking about but still learning js. Thank you very much! here is my portfolio site for the class i’m taking and if you look at it my teacher recommended that i change the menus sidebar to collapsible so that my content height won’t make up for it by extending it self depending on the length of the sidebar so i decided to use your incredible menus. what do you think? i’ll link back to you ofcourse. Thanks a bunch

  • John permalink

    I Can’t seem to do a server side include with the script.

    what does this code do?

  • iain permalink

    hi, used the slide code which works well in ie8 until i publish to iis then only the top part works. the code hasn’t changed i simply uploaded webpages into iis and the this menu didnt appear properly! any ideas

    • Matthew permalink

      Does it work in Firefox or Chrome after you publish? Be sure to use the Web Dev toolbar or Firebug in Firefox to see if there are any JavaScript errors.

  • Jasper permalink

    Hi,

    Any idea how to make it so it remembers what tabs you had open on page refresh?

    Thanks

  • Hey,

    It works! awesome Jquery Stuff buddy :o)

    Looking forward more stuffs from you :)

    Best,
    Vaishakh

  • ida permalink

    how can i use the sliding menu in wordpress and php? when i try it’s not working.

  • Hiya Matthew,

    Pretty fantastic stuff, just what I was looking for. But I’ve a question: If I have hyperlinks as link items, is there a way the value I select carry over from one link to the next?

  • You are a genius, my friend. Thank-you!

    I wasn’t able to nest the menus within a container div though – Is there some trick (like that I need to put somewhere to enable auto-stretching of the container? Compare, expanding an item:
    http://www.barnton.org/faq.php?div=0
    http://www.barnton.org/faq.php?div=1

  • Erez permalink

    Hi,
    I Must say Your menu is the BEST!

    I have a Q about menu example 3.
    Is it possible changing the fade away direction of the sub items:
    When opening the sub menu I want the sub items to appear from right to left – not from left to right as it is currently

    Any way thanks!

  • Erez permalink

    .example_menu li {
    background-image: none;
    margin: 0;
    padding: 0;
    padding: 0;
    direction:rtl; <<<<<<<<<<<<<<<<<<<<
    }

    • Matthew permalink

      Even better than the links I posted since it’s fully support, even in IE6!

      • Thank you for the tutorial. I was using the Accordion from this tutorial, was working fine, but seems there are having some problems (while click one element to collapse , then collapsing another one) with latest jquery file. So, right now using jquery’s Accordion widgets. Still, I love this tutorial, helped a lot to understand better.

  • Charles Bohm permalink

    I have seen a couple of questions on sub-folders. Is there a way to control the subfolders separately? I have menus that go up to 4 deep and want to control the sub folders independently.

    Would I create another class to handle this?

    Thank you

  • PeterCH permalink

    Thank you very much for the tutorial.
    Is there any way to change the behaviour of Accordion so that re-clicking a “Section” wont close it? So that once you click open a section it doesnt close until you click another section.

  • Leda permalink

    Hello, I used your accordion menu and it looks just fine. But I have a problem/question. My menu is quite simple and it looks like this:

        	<a href="#" rel="nofollow">Home</a>
            <a href="#" rel="nofollow">Academic Positions</a>
            <a href="#" rel="nofollow">Research</a>
            	
                	<a href="recent.html" rel="nofollow">Recent</a>
                    <a href="#" rel="nofollow">Publications 1</a>
                    <a href="#" rel="nofollow">Publications 2</a>
                
            
            <a href="#" rel="nofollow">Teaching</a>
            <a href="#" rel="nofollow">Service</a>
            <a href="#" rel="nofollow">Contact</a>
         
      <!-- end .sidebar -->
    

    I want when someone clicks on Research (it succesfully expands) and then clicks on Recent (recent.html that has the same menu) that the Research stays expanded. I ve tried to change the class to expanded of the recent.html but when the recent.html loads, for a second or two the submenu is collapsed then it expands. How do I do that?

    I ll appreciate any help!!! Thank u!!

  • AWESOME! Thank you so much! =D

  • Thank you for creating this menu, it works great! The only small drawback I have with this menu is that the menu items only indent two levels deep. Is there a way to get the menus Items to “go deeper”, with indents for level 3 and beyond with other nested UL list nested inside of li tags? Thanks again for creating this. —Chris—

  • Emily permalink

    This script is great! Thank you for providing it.

    I must have spent nearly 2 weeks trying to find the right script to integrate into some code I’m working on for an expandable/collapsable columns table grid. In the end, your script was the only script out of so many (grids scripts, accordion scripts, etc) that did the job- and it did it perfectly too. Except for one big issue that I’m now faced with on the page.

    I realize that the script has been so customized that it’s somewhat of a far stretch from your original script but I’m running out of ideas for fixing this cleanly and am hoping that maybe you encountered something similar to this with your vertical menu or elsewhere.

    Could you please take a look at my progress thus far?
    I’ve posted the code for you to view at http://redapplefalls.net/_projects/expand-test/lousyllama-test.html.

    Thank you!

  • Perhaps this was already covered, but it would be better to handle ALL the hiding through jQuery from an accessibility standpoint. If someone were to have JS off, then the menu items would be hidden by using CSS.

    I took out the CSS declaration hiding the UL’s and used this JS instead:

    [script]
    $(‘#menu ul’).slideToggle(‘medium’);
    [/script]

    I’m not a jQuery pro by any means, so this is my way of hacking it. :)

    • Matthew permalink

      I appreciate the input, but am unconvinced it is necessary. The extremely small minority of users that would have JavaScript disabled, if they exist, have bigger issues to contend with on the most popular websites like Google, Facebook and YouTube than with a collapsible menu. In today’s world of event driven software on computers and mobile devices, I believe it’s a waste of time planning for unrealistic scenarios such as disabled JS. On top of that, I have yet to meet or know of anyone that does this. Five years ago I would have argued for it. Today, I am nearly as much against it. The primary advantage would be for older smart phones with older JS engines, if any, running.

      The bottom line is you cannot expect to run a dynamically driven website without JS and call it lazy, but I would rather not invest extra time making JS reliant functionality work without it.

  • Huzefa Husain permalink

    I like the 3 level navigation, but i want all the levels to be collapsible, where i can collapse clicking on the icon and the links to work like it is working now.

    Kindly give your suggestion.

  • Pedro permalink

    Hi!
    Great job, this is a very good example but I have one question.
    Is it possible to use this example with submenus, for instance, a colapsible menu inside Section B?

    Best regards!

  • Priyanka permalink

    thank you i love ur accordion slider

    priyanka

  • Hi, I love this tut, however my nav will not work in ie,

    here is the site:

    http://stephanieannemiller.com/nicole/index.php

    Please let me know if you know how to fix it.

    Thanks!

  • Lewis permalink

    Can make Collapsible Menu: Accordion to have collapse all or expand all button just like others?

    • Matthew permalink

      You can use the example code that achieves this effect, just update the selectors where applicable. The expand all defeats the purpose of an accordion however.

      • Lewis permalink

        Good to know that. :)

        Do we have any setting to make it extent with the height of table or div which contain the Accordion menu? I am facing this problem now.

  • mike permalink

    on the accordion categories, is their any website exampes of them in action, please! i see if you make this the plus sigh opens the sub-categories lists. but when adding a name next to the plus sigh and it is clicked it opens to all the sub-categories in that category with all its contect for sale?

  • paraz permalink

    Thank you very much. This helped me a lot. I am grateful to you.

  • Thanks! Works like a charm and fixed my Responsive UI challenge. You rock!

  • Dave F permalink

    Awesome menu, thanks. One question – taking the ‘Slide’ menu (the first one) as an example, when you open Section A then open section B, section B remains open. How can I modify this so that if I have Section a open then open Section B, section A closes?

    I only want one menu open at any one time. Is this possible with this script?

    Thanks in advance.

    • Matthew permalink

      The accordion demo does exactly what you want, but now that I’m looking at it, you can’t see it without looking for it because the page’s formatting is screwed up.

  • Dave F permalink

    Thanks matthew, I thought the same thing and noticed the accordion option a day after posting this! Is it possible to add submenus too so I click section A which opens up A1, A2 etc.?

  • Hi Matthew, awesome stuff mate!
    Is there any way that I can keep the menu expanded, depending on the page we land on?

    Thanks, cheers!

    • Matthew permalink

      That’s a simple matter of changing the class on each page load, depending on the page. The easiest way would be by setting it on your server side code. Another option, though less elegant, is through the use of cookies.

      • Jordi permalink

        Thanks Matthew, sounds easy, I will give it a go.
        Cheers!

  • Nicholas John permalink

    So im looking at the line of code:

    I was wondering, is it possible to include that API within my code? Reason being is I want to use it for reports that I create, but the PC’s are not connected to the internet so they cant call that api.

    Cheers

    Nick

    • Matthew permalink

      Sorry Nicholas, the code you pasted didn’t come through, so I’m not sure what code you’re referring to.

      • Hi,

        Thanks for the code, it works great but I have a small problem that is infuriating me!!

        Do you know why my page content is dropping its position from the top when the menu expands?
        http://www.jasonbrowngoalkeepercoaching.com/test/widgets-titlepage.html

        On other pages it id fine and others it ‘drops’ position. It seems inconsistent throughout the site.

        I’ve been looking for answers for weeks, my last resort was to ask for help here.

        Kind regards,

        Thomas

        • Matthew permalink

          You’re seeing this because you’re using a table for your layout (tsk tsk!). The menu expands, stretching the cell and row that it is contained it. You’re already using valign=top, but the problem is the cell for the heading has to increase to compensate for the larger height. You might be able to get by with more table tweaking, but really, this design should be in divs at the very least.

          • Hey, Thanks for replying.

            I hav rebuilt this page with divs (my first effort with divs!).

            http://www.jasonbrowngoalkeepercoaching.com/test/indextest.html

            Would you happen to know why only some of the menu links work from this page?

            Any help would be brill.

            Kind regards

          • Matthew permalink

            You’ve got some odd CSS definitions in an otherwise simplistic layout. Unfortunately I don’t have the time to give a detail breakdown of what I mean odd, but I suggest looking around for two column css layouts. What’s essentially happening on that page is the content covering the menu. It might help you to think of the website in an abstract sense. In your case, there’s a header, side navigation, content, and footer. Each of these serve as containers for whatever is inside of them. Here’s a crude example I threw together in JSFiddle. There are lots of tutorials floating around, and what I put together is one of numerous possible ways of achieving what you’re wanting to do.

  • thanks for your input. much appreciated.

  • Dario permalink

    Just another thanks!! To people like you for sharing knowledge and helping beginners like me :-)

  • Trackbacks & Pingbacks

    1. JQuery – Desarrollo de Interface Gráfica de Usuario | Tecnologías de Información y Sistemas
    2. Jquery para interfaz gráfica » Mayday
    3. Links useful to me | Ramesh Chithaluri

    Leave a Reply

    Note: XHTML is allowed. Your email address will never be published.

    Subscribe to this comment feed via RSS