Question

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?

Answer 1

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.