Folding WordPress menu pages

Posted on by Elio Rivero

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 code, now it works for multi level depth page hierarchies.

Here’s the jQuery code:

[code language=”js”]
jQuery(document).ready(function($){

var $thisPage = $('.current_page_item');

$thisPage.each(function(){
    var $self = $(this);

    $('ul:first', $self).slideDown();

    $self.parents('ul, li').map(function () {
        $(this).slideDown();
    });

});

});
[/code]

add the CSS for your stylesheet:

[code language=”css”]
.page_item ul {
display: none;
}
[/code]

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.

Published by Elio Rivero

Software engineer, designer and photographer.

57 thoughts on “Folding WordPress menu pages”

    1. 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.

  4. =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

  7. 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?

  8. 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.

  11. 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

  12. 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.

  14. 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?

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

  15. 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!

  16. 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!!!

    1. 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.

  21. 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 ?

    1. 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.

  30. 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!

  32. 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!

  35. Hi,
    great plugin!! i have a question: i have more menù, but folding works only on first, there is the possibility to applu folding on every menù??

  36. Nico, I will update the plugin later, but for now just replace the javascript code of folding.js with the following:
    jQuery(document).ready(function(){

    jQuery(“.page_item ul, .page_item .children, .menu-item ul”).hide();

    jQuery(“.current_page_item ul:first, .current_page_item .children:first, .current-menu-item ul:first”).show();

    jQuery(“.current_page_item, .current-menu-item”).parents(“ul, li”)
    .map(function () {
    jQuery(this).show();
    });
    });

  39. ey mate,

    hell knows how many times i tried but im such a noob in php and the works. i’m using sandbox and i couldn’t make it work. please help. thanks!

  40. I can’t add anything to my sidebar without it making the menu disappear all of a sudden. Is there a solution to this new problem?

    1. It’s not a problem. It’s the way WordPress works. If you have an static bar that supports widgets, whenever you add a widget the other static content will dissapear to make room to widgets. Just keep adding the widgets you need.

  41. “Just keep adding the widgets” and …?
    Your menu will reappear after a while?
    Sorry I don’t quite understand.
    Maybe I should add widgets to a second sidebar instead.

  42. Anne, if your site is greenlandwhitefront.org, it is currently not using Widgets. The menu is generated in what we call an static sidebar. If the sidebar is (and I assume it is) widgetized, you should first add the Page widget and then the Category widget. Here’s a doc from wordpress.org regarding the use of widgets.

  43. hey! …quite a while ago you talked about the possibility to make a “switch”….for those who don’t want to slideup the children when clicking on them… was this already solved? thanks.nico

    Elliot April 2nd, 2009

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

  44. It works fine in Firefox & Chrome, but it doesn’t work properly in IE:

    Here is the code i’m using:

    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();
    });
    });

    For some reason IE appears to fail on this line:

    jQuery(“.current_page_item”).parents(“ul, li”)

    Is anyone able to advise how I can fix this so that IE recognises this code?

    Please help!! It’s a great plugin but I really need it to work in IE as well.

  46. Hello,

    I recently updated my theme and my WP installation, so I am not sure which caused this problem, but ILC Folding was working perfectly. Mainly, my side navigation used to display (top and sub-levels) and highlight appropriately (current page item), then it started doing this weird thing that when you clicked on a parent level, or a subnavigation menu item that was in a submenu already displayed, it reloaded the entire side menu again. To fix this I used the following code:

    #left ul li ul{ display: none; }
    #left li.current_page_parent ul { display: block !important;}

    This seemed to do the trick, and it does for the first and second levels of my side navigation, but when you drill down to the third level and below, all of the third level menus get displayed, even for items that are not currently active.

    This code fixes that:
    #left li.current_page_parent ul.children li.current_page_item { display: block !important;}

    But then you get the reloading of the entire menu again. If you look here you will see what I mean: http://arboretum.harvard.edu/library/image-collection/the-arnold-arboretum-captured-in-time-1982-1987-photographs-by-corliss-knapp-engle/

    I hope this makes sense, I would really appreciate any help, I am stuck.

    Thanks!

  47. Hi there, like Anne above I too have a problem with this plugin in IE7. When I click an ancestor page link, the menu folds out and the children pages will display briefly, but then disappear. The space they take up will be visible (there’s a gap between the current ancestor menu link and the next one), but there’s no clickable zone where the sub pages should’ve been displayed, just the empty space (tested this because I suspected the link colour was the culprit). Any help would be greatly appreciated!

Leave a Reply