Search code examples
jqueryjquery-mobilejquery-mobile-collapsible

Make a collapsible expand over the content beneath it

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.

Solution

  • 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!