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?