Search code examples
jqueryaccordionexpander

Accordion-like one-element expanding component in jQuery UI

I need to implement an expanding/collapsing box in jQuery UI. When collapsed, only the box header would show. When expanded, the header+contents would show.

What I need to do is very close to jQuery UI one-element accordion with alwaysOpen=false (the same property is called "collapsible" in document, but in practice with jQuery 1.3.2 and jQuery UI 1.6rc6 it seems to be alwaysOpen):

$('.myAccordion').accordion({
    header: 'h3'
    , alwaysOpen: false
});

There is one problem: I need the expanding/collapsing to happen only when clicking on the triangle on the left, not when clicking the whole header.

An additional requirement is that I would like to use the jQuery UI default UI styles and not implement my own stylesheet, so that I could roll new styles with themeRoller if need be. The accordion styles in jQuery UI (including the arrows in the header) are very nicely suited for this purpose.

Now, I have two options:

1) configure the Accordion widget so that only the triangle responds to expand/collapse events. I need the clicks on the rest of the header to be basically ignored.

2) implement my own widget, using accordion styles as base.

I would rather do 1), but I am having a hard time figuring out how to make only the arrow respond to click events.

So, as for the actual question, how would you do this?

Solution

  • OK, turns out it's easy to accomplish this with the accordion widget itself. Just set the accordion up this way:

    $('.myAccordion').accordion({
    header: 'h3'
    , alwaysOpen: false
    , event: 'click'
});

$('.myAccordion h3 a').click(function() {
    return false;
})

    Although it's bad usability practice since the click target area is so small, but well, it answers the question I posted.