Scrolling jquerymobile set position with disassembly when expanding

Question

I am using jQueryMobile (v1.4.0) a resettable set / chords to display a list of items and its contents, 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> 

I have a scrolling issue when the content of an element is longer than the screen length .

For example, in a script:

• Open the first folding element
• Scroll down (if you do not need to scroll, resize the window so that you have to ... otherwise the problem is not visible)
• Open the second item

=> the first element is closed and the second element is open, but the page scrolling does not change, and now you see the end of the second content of the element.

So my question is: Is there a reasonable way to get the page to set the “title” of the second element at the top of the screen?

Thank you.

Answer 1

Once the unfolding is unfolding, return it ' .offset().top and $.mobile.silentScroll() to this position.

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

Update: For jQuery Mobile 1.4, use the collapsibleexpand event.

Demo - jQM 1.0 - 1.1

Demo - jQM 1.2 - 1.3

Demo - jQM 1.4