Question

So I am trying to create a custom collapsible header for the accordion
http://jquerymobile.com/demos/1.0b3/docs/content/content-collapsible-set.html
What I want the header to look like

<div data-role="collapsible-set">

    <div data-role="collapsible" data-collapsed="false">
    <div id="header">
<h3>Section 1</h3>
    <p>I am Part of a Header</p>
    </div>
    </div>

</div>

Right now it looks like it will only work if h3 is the first child. Is there a way I can do what I want?

Answer 1

Try something like this:

<div data-role="collapsible-set">
  <div data-role="collapsible" data-collapsed="false">
    <h3>
       <div class="header">Section 1</div>
       <div class="subheader">I am Part of a Header</div>
    </h3>
  </div>
</div>

You won’t be able to get around the fact the h3 must not be wrapped, unless you do some js hackery. Which is probably a bad idea.