November 13th, 2008
Tutorial : Collapsible Menus using jQuery
jQuery has surely made my life easier. I have been trying out both Prototype & jQuery for a couple of days now and for some reason, I find jQuery a lil easier compared to Prototype Javascript Library. Although Prototype is a much powerful library (according to me), jQuery is just too simple 
. Anyways I will show you a simple effect which you already must have seen in many places.
Demo : The Category section in the sidebar in this site.
EDIT : Added Collapse All, Expand All Code as well
This code can be extended in creating a full-fledged dynamic Collapsible Menu. Mainly you can use this code in you Blogs (if you have a large array of Categories) to group your categories/tags.
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
//Store Image paths
var toggleMinus = 'path/to/minus/image';
var togglePlus = 'path/to/plus/image';
var $subHead = $('.children').parent();
//Add the Plus image to every child by default
$subHead.prepend('<img src="' + togglePlus + '" alt="collapse this section" /> ');
//By Default put the Menu in collapsed state
$('.children').parent().children('ul').slideUp('fast');
//Expand All Code
$('.expand').click(function() {
$subHead.children('ul').slideDown('fast');
$('img', $subHead).attr('src', toggleMinus);
});
//Contract All Code
$('.contract').click(function() {
$subHead.attr('src', toggleMinus).children('ul').slideUp('fast');
$('img', $subHead).attr('src', togglePlus);
});
//Expand or Contract one particular Nested ul
$('img', $subHead).addClass('clickable').click(function() {
var toggleSrc = $(this).attr('src');
if ( toggleSrc == toggleMinus ) {
$(this).attr('src', togglePlus).parent().children('ul').slideUp('fast');
} else{
$(this).attr('src', toggleMinus).parent().children('ul').slideDown('fast');
};
});
});
</script>
Basically .children can be kept same if you are planning to use this in your WordPress Blog (for Categories or any unordered list or ordered list since WordPress assigns class=children to nested lists)
If you want to use this code in some other form, then .children has to be replaced with the class name of the nested list. For Example, the above code works for lists like
<a href="javascript:void(0);" class="expand">Expand All</a> <a href="javascript:void(0);" class="contract">Contract All</a> <ul> <li>Main 1 <ul class="children"> <li>Sub 1</li> <li>Sub 2</li> <li>Sub 3</li> <li>Sub 4</li> </ul> </li> <li>Main 2 <ul class="children"> <li>Sub 1</li> <li>Sub 2</li> </ul> </li> <li>Main 3</li> </ul>
This is how it looks. (I haven`t added Expand All and Collapse All in the Demo Here)
- Main 1
- Sub 1
- Sub 2
- Sub 3
- Sub 4
- Main 2
- Sub 1
- Sub 2
- Main 3
You can style the unordered list not to display the bullets using CSS which I haven`t shown above.
I hope you guys enjoyed this post. If you guys have any questions, your comments are welcome.
Signing off.
September 8, 2009 at 12:54 am
Hehe, now, can you add in some cookies to keep the cats expanded or collapsed? –
plugins.jquery.com/project/cookie
That would be awesome. Can’t seem to get it personally.
September 6, 2009 at 2:45 am
Thanks much for this. I’ve been searching for a category solution for days, and this basically removes the need for custom plugins or custom widgets for the categories. This needs to be standard in Wp or at least added as a plugin in the codex.
Note to users – make sure to add full image paths in your javascript, and make sure they are large – I used the bullet.gif image from my theme and it was so small the javascript wouldn’t recognize it. Larger image worked fine tho.
May 27, 2009 at 4:29 am
will this work on wordpress.com hosted blogs
March 1, 2009 at 6:54 pm
It is good and it works.
January 15, 2009 at 8:35 am
Thanks so much! been trying to get this to work on my own for ages, but to no avail. this has been a great help.
One question:
Is it possible to make the .parent also the expander/collapser button…. in other words, remove the link to the parent category and make it a button that expands it’s list of children??
Does this make sense?
Category Parent [just an expander link]
Category Children [actually links to categories]
December 1, 2008 at 1:16 pm
Thank, great work. It really help me.But i would like to know how to make it “expand all / collapse all.
November 20, 2008 at 8:46 am
@Jim
Thanks Jim, I have corrected it now
November 19, 2008 at 10:55 pm
@Michael
Thanks for the update. The Expand/Collapse All worked, but only after throwing a JavaScript error (in IE7 – didn’t test in any other browsers). I changed the HREF of the Expand/Collapse links from javascript:void(); to javascript:void(0); and the error went away.
FYI: When I clicked “Reply to this comment” to post this message you’re reading, I got the exact same JavaScript error:
Line: 1
Char: 6
Error: Syntax error
Code: 0
URL: (this page)
November 19, 2008 at 8:22 pm
@Arthur
Did you add the jQuery library before adding the code ??
November 19, 2008 at 6:46 pm
Unable to make it work – SUCKS!
November 19, 2008 at 6:26 am
You need to make the main 1, main 2, main 3 ul clickable to expand/contract. Would make it much more user friendly.
November 18, 2008 at 8:08 am
@Jim
Thanks for posting. I have modified the article with your request. Hope it helps
Regards
November 18, 2008 at 12:58 am
Nice & small & works great but… how to make it “Expand / Collapse All”? Thx!