I am utilizing jQueryMobile (v1.4.0) collapsible set / accordions to showcase a list of elements along with their content, which can be seen 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 issue I am encountering is related to scrolling when the content of an item exceeds the size of the screen.
For example, in the fiddle:
- Expand the first collapsible item
- Scroll to the bottom (if no scrolling is required, resize the window to trigger it... otherwise the problem may not be noticeable)
- Expand the second item
=> the first item closes and the second one opens, but there is no adjustment in page scrolling, so you end up viewing the end of the content in the second item.
Hence, my inquiry: Is there a clever method to make the page position the "header" of the second item at the top of the screen automatically?
Thank you, T.