Question

I am trying to use Jquery UI accordion module to create a sidebar containing categories of objects (headers) that when clicked display the sub-categories (contents).

The accordion itselfs works fine: when I click on a category, it displays a new section containing the links towards the different sub-categories’ pages BUT the links towards the main categories do not work anymore. I would like a click on a category to do TWO things: change the accordion appropriately AND open the link.

I have searched the web for 2 hours, and the only clue I found was to use a callback to the change event of the accordion, but I am extremely newbie in jQuery/Javascript, so I don’t know how to do this or if it’s the best option.

If I use "mouseover" to trigger the accordion, then everything works fine: the click event on a category is still opening the category page. Should I use mouseover or is there a solution using click as the event ? (the problem is that jquery generates a client-side event, whereas the link should generate a server-side event)

You can check what I mean live here (clicking on the "Media" in the left sidebar should open the sub-categories but also open the list of objects within the Media categories, whereas clicking on sub-menu "books" works fine).

Many thanks for any help!

Answer 1

Instead of using links in the accordion headers, use the accordion’s change event.

http://jqueryui.com/demos/accordion/#event-change

$( "#accordion" ).accordion({
    changestart: function (event, ui) {
        var href = ui.newHeader.attr( "href" );
        // do something with href
    }
});