Scroll position of a jquerymobile collapsible set when expanded

Question

I am using a jQueryMobile (v1.4.0) collapsible set / accordions to display a list of elements and its content as shown in this jsFiddle.

<div id="List" data-role="collapsible-set">
    <div data-role="collapsible" data-content-theme="c">
       <h3>Lorem ipsum 1</h3>
       <p>Suspendisse neque...</p>
    </div>
    <div data-role="collapsible" data-content-theme="c">
       <h3>Lorem ipsum 2</h3>
       <p>Lorem ipsum...</p>
    </div>
</div> 

The problem I have is with scrolling when the content of an item is longer than the length of the screen.

For instance in the fiddle:

• Open the first collapsible item
• Scroll to the bottom (if you do not have to scroll, resize the window so that you have to... otherwise the problem isn't visible)
• Open the second item

=> the first item is closed and the second item is opened, but the page scrolling doesn't change and you now see the end of the second item's content.

Thus my question: Is there a smart way to force the page to set the "header" of the second item at the top of the screen?

Thanks, T.

Answer 1

Once a collapsible is expanded, retrieve its' .offset().top and $.mobile.silentScroll() to that position.

$(document).on("expand", "[data-role=collapsible]", function () {
  var position = $(this).offset().top;
  $.mobile.silentScroll(position);
});

Update: For jQuery Mobile 1.4, use collapsibleexpand event.

Demo - jQM 1.0 - 1.1

Demo - jQM 1.2 - 1.3

Demo - jQM 1.4