WordPress mootools accordion menu

I just migrated my old DasBlog to WordPress (really like it). After making a few changes to the default theme I was wondering if there is a simple way to have a mootools accordion effect on my sidebar.

I know there are 10 ways to install accordion menus, but somehow none of them was working for me as I believe in simple solutions.

Here a small script I added to my header and the accordion was working after 5 minutes.

// add event listener to parse side panel
window.addEvent('domready', function() {

    // add class name to widget element
    var togglerElements = $('li.widget');
    for(var i=0; i < togglerElements.length; i++) {
        togglerElements[i].childNodes[1].className = "widget_element";
    }

    // create Accordion instance
    var myAccordion = new Accordion($('accordion'), 'li.widget', '.widget_element',   {
        opacity: false
    });
});

Make sure you include Mootools 1.2 Library.

As I could not find a way to add a class name or id to the sub <ul> element of the widget title I loop throe them and add the className.

Ok I agree a bit hacky but it does the job. If there should be a better solution please let me know.

One response to “WordPress mootools accordion menu”

1. Komal says:

   October 4, 2010 at 11:41 pm

   Hi there,

   I want to add something similar to my site. Can I add this into a page or something?

   Reply