title: Accordion-like one-element expanding component in jQuery UI
body: <p>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.</p>
  
  <p>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):</p>
  
  <pre><code>$('.myAccordion').accordion({
      header: 'h3'
      , alwaysOpen: false
  });
  </code></pre>
  
  <p>There is one problem: <strong>I need the expanding/collapsing to happen only when clicking on the triangle on the left, not when clicking the whole header.</strong></p>
  
  <p>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.</p>
  
  <p>Now, I have two options:</p>
  
  <p>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.</p>
  
  <p>2) implement my own widget, using accordion styles as base.</p>
  
  <p>I would rather do 1), but I am having a hard time figuring out how to make only the arrow respond to click events.</p>
  
  <p>So, as for the actual question, how would you do this?</p>