Jquery Accordion & Wordpress

Question

Hi there, am trying to use the Jquery accordion to show a list of links generated by wordpress with the wp_list_categories(); function.

This function returns a list of <ul> <li> <a> tags. My problem is that in order to get it working fine, like the second exemple on this page, the heading <a> tags, have to get a special class: <a class="head" href="?p=1.1.1">Guitar</a> that is used in the js definition of the accordion:

jQuery('#navigation').accordion({
        active: false,
        autoheight:false,
        header: '.head',
        event: 'mouseover'
    });

Without this class, the hover opens the sub list, but as soon as i get down to hover on of the child elements, it closes the accordion. The exemple is the grey bloc on this page.

My question goes like this, is it possible to append with javascript the required class (.head for ex) to this dynamically generated list ?

Answer 1

It is, especially since you're using jQuery.

jQuery('#navigation > li > a').addClass('head');

It's not beautiful, but it should work. Add it in before the code you quoted.

Answer 2

Instead of setting header to .head, could you set it to #navigation > li > a, which would select the top level <a> tags?