Make a collapsible expand over the content beneath it

Question

I'm trying to create a collapsible that, when expanded, should roll over the content beneath it. So the content beneath it stays in place.

 <div data-role="collapsible">
     <h3>Content of collapsible</h3>
     <ul data-role="listview">
         <li>I'm the collapsible set content.</li>
         <li>I should roll over the data beneath me.</li>
     </ul>
 </div>
 <div>
     <p>I'm data underneath.</p>
     <p>I should remain in place when the collapsible is unfolded.</p>
 </div>

Sample code in action: http://jsfiddle.net/3swM6/

Possibly I'm using the wrong approach to achieve this.

Answer 1

To achieve this effect you need to set the position of the content that you want to "stick".

Here's a working example: http://jsfiddle.net/jakemulley/xU6Pv/

I used the following CSS:

.hider .ui-collapsible-content {
    position: absolute;
    width: 100%;
}

Hope I helped!

Answer 2

You just need these CSS rules on the collapsible content generated by jQueryMobile:

position: absolute;
width: 100%;

Here's a working example from your jsfiddle: http://jsfiddle.net/3swM6/1/