Folding menu plugin for WordPress

A while ago I wrote a post about creating a folding menu for WordPress built in Pages widget using only jQuery without adding or modifying any markup or PHP. A reader, Kretschmar, reported some bugs and asked if it could work for more than one level.

After modifying the jQuery for it to work on multi level depth I created a simple plugin for WordPress. See the demo of ILC Folding, go and click on Page 2.

Here’s the jQuery code:

jQuery(document).ready(function(){
jQuery(".page_item ul").hide();
jQuery(".current_page_item ul:first").slideDown();
jQuery(".current_page_item").parents("ul, li")
.map(function () {
jQuery(this).slideDown();
});
});

So, after sliding down the first parent and getting all parents of current_page_item, we slide down each parent level by level until the list is empty.

I packed everything and created a WordPress plugin so you can download the folding plugin for WordPress and start collapsing those Pages.

If you liked this you might want to buy me a coffee :)

Tags: freebie, plugin, resources

Spread the word, share this post

Posted on Wednesday, March 11th, 2009 in Wordpress, jQuery.
RSS 2.0 feed for comments.

Tadd

This looks fabulous! I’ll have to check it out – thanks for your hard work!

March 14th, 2009 at 5:04 pm

WordPress Plugin Releases for 03/14 | TechnoBlog

[...] Folding Menu Plugin [...]

March 15th, 2009 at 8:33 am

Elliot

Tadd: I’m glad it saw the light. It could’ve been sleeping the eternal dream forever. Hopefully now it will be useful to someone.

March 15th, 2009 at 1:48 pm

darkar

Say it!

March 15th, 2009 at 10:16 pm

Andrea

=D
see the light
it will be useful for me too probably
thnx
i’m just learning php and such things about wordpress jquery blabla i have no idea you know xD

March 18th, 2009 at 3:01 pm

i forgot it
very nice pageeee!!!!!
is really cool i love it ^_^

March 18th, 2009 at 3:02 pm

Thanks Andrea for your kinds words.

March 18th, 2009 at 6:59 pm

Dave

It would seem like a ‘demo’ / example would be essential to see what this does?!

Thx

March 19th, 2009 at 6:40 am

May I ask where should one paster the wp_enqueue_script? Into a special file or into the head section? And the should js file be placed?

March 22nd, 2009 at 4:49 am

al, first of all, the download provided here is a WordPress plugin. Install it and activate it like any other WP plugin and that’s it.
The wp_enqueue_script sentence must be placed inside a hook linked to the `init´ action.

March 22nd, 2009 at 2:00 pm

Mike Salway

I’d love to see an example/demo too please.

btw great website, beautiful design.

March 26th, 2009 at 4:25 am

I’ve set up a vanilla wordpress to demo this plugin. Go to ILC Labs and click on Page 2.

March 26th, 2009 at 5:22 am

Delicious SEO Bookmarks » SEO Update

[...] :: Folding menu plugin for WordPress :: – Wordpress Plugin folding menu [...]

March 27th, 2009 at 11:43 am

Steve

Hi, this looks like what im after, however im not sure how to implement it. I have installed the plugin, and have the normal pages widget in use. What do i need to do to get this to work, at the moment all i get is the normal parent pages displayed by the pages widget. Im sure i have missed the point somehow, im compitant in XHTML and CSS, but only started using wp LAST WEEK!
thanks

March 27th, 2009 at 4:08 pm

Steve, install/activate the plugin and add some parent pages. Add then some children to parent pages. Visit your site and click on a page that has children pages. When the page is loaded the children will be revealed.

March 27th, 2009 at 11:21 pm

March 27th, 2009 at 11:30 pm

great, sorted.
Only other thing, the child pages on my site are not indented, is this something i would need to sort in my css file?

March 30th, 2009 at 9:34 am

Yes, you should apply your own styles. You can check the WordPress default theme to see which classes are used.

March 30th, 2009 at 6:09 pm

Peter

I’m working on a site and just used this plugin.

It works great, but the only thing i dislike, is that it keeps refolding after clicking on one of the ‘children’.

Is there a way to just keep it fold out, when it is already?

Thanks in advance!

March 31st, 2009 at 9:36 pm

Stuart

Testing this plugin, and I like it a lot. But it seems to auto-expand different child pages at will – is there a way to force it to collapse all but the current tree?
Thanks!!!

April 1st, 2009 at 10:58 am

Peter, Stuart: maybe I can add a switch for those who want it to operate that way.

April 2nd, 2009 at 2:52 am

That would be great. Apart from that, 10 out of 10!

April 2nd, 2009 at 10:38 am

Falco Stellare

Great plugin!!! It would be nice to have a feature to slide down the sublevels without entering the first-level page…

April 2nd, 2009 at 12:00 pm

Peter J Harrison

Great plugin, wish wp had this functionality by default! Great work!

April 7th, 2009 at 2:27 pm

Peter, I think that the beautiness of WP lies in the fact that it is quite small, so is not bloated with a lot of code. I’ve always loved the C programming language due to this. It’s small but you can build a skyscraper on top.

April 7th, 2009 at 5:09 pm

Very well said!

April 7th, 2009 at 5:59 pm

Michael

Thank u for the nice plugin.

I am testing the plugin and works fine with pages but when you a add a category the plugin does not remain open on the current li, is there a workaround ?

April 10th, 2009 at 3:03 pm

This plugin is intended to be used with the Pages widget. I could add later some code to catch the categories folding, but I’m currently quite busy with work so it will have to be after one week.

April 10th, 2009 at 3:15 pm

Edward

Worked perfect buddy. Thanks for developing this.

June 18th, 2009 at 3:44 pm

No prob. I’m glad it’s useful to you.

June 20th, 2009 at 4:29 pm

Wordpress Navigation & jQuery - IOException.de

[...] aktuellen Seite anzuzeigen und den Rest einzuklappen. Bei der Suche nach einer Methode bin ich auf Folding menu for WordPress gestossen. Allerdings fand ich die Animation bei jedem Klick etwas [...]

June 22nd, 2009 at 2:08 pm

parent talk

a new parenting blog for parent discussions chats and natters http://parentinggossip.blogspot.com/ get it all out

August 16th, 2009 at 2:04 am

Vroni

Thank you so much for this. I’ve searched so long for something like that. Great …

August 23rd, 2009 at 6:36 am

Thanks for the great work you do. Appreciate your valuable time.

August 25th, 2009 at 6:29 pm

Digital Nomad

Thanks for sharing the plugin. Will try it out today!

September 13th, 2009 at 5:38 pm

Useful resources « I heart cclab

[...] Posted in Resources jquery menu: http://www.ilovecolors.com.ar/folding-menu-plugin-wordpress/ [...]

October 16th, 2009 at 5:12 pm

Jens Törnell

This works great! Simple way to solve it!

October 20th, 2009 at 11:05 am

David

Amazingly simple.. If your not paying attention you might not even know that it’s working. And it exactly what I have been looking for.

Thanks!

November 16th, 2009 at 5:44 am

Carl

Your are amazing and I love you.

January 20th, 2010 at 8:48 am

Angela

This is EXACTLY what I have been looking for. Thank you so much for working this into a plugin. Your work is very much appreciated!

January 21st, 2010 at 3:59 pm

Elio

Thanks Angela, I really appreciate your kind words.

January 24th, 2010 at 11:57 pm

phill Taare

firstly thanks for your plugin it’s really
brilliant, I’m trying to modify it however to act like an expanding/collapsing menu and less like an accordian eg:http://www.i-marco.nl/weblog/jquery-accordion-menu/index_collapsed.html#
However my programming is basic at best, anyways thanks I appreciate your plugin.

February 11th, 2010 at 9:34 am

Hey Phill, it’s looking good!

February 11th, 2010 at 11:38 am

ilovecolors

Folding menu plugin for WordPress

“Folding menu plugin for WordPress” has received 43 comments! Add yours.

Leave a comment

Affiliates

Recent Posts

QR Code generator

New default theme TwentyTen

Custom Post Types in WP 3.0

Getting colors from a site with HTML5

Sample content for WordPress

Follow me on Twitter