title: Scroll position of a jquerymobile collapsible set when expanded
body: <p>I am using a jQueryMobile (v1.4.0) <a href="http://view.jquerymobile.com/1.3.2/dist/demos/widgets/accordions/">collapsible set / accordions</a> to display a list of elements and its content as shown in this <a href="http://jsfiddle.net/5qjst/1/">jsFiddle</a>.</p>
  
  <pre><code>&lt;div id="List" data-role="collapsible-set"&gt;
      &lt;div data-role="collapsible" data-content-theme="c"&gt;
         &lt;h3&gt;Lorem ipsum 1&lt;/h3&gt;
         &lt;p&gt;Suspendisse neque...&lt;/p&gt;
      &lt;/div&gt;
      &lt;div data-role="collapsible" data-content-theme="c"&gt;
         &lt;h3&gt;Lorem ipsum 2&lt;/h3&gt;
         &lt;p&gt;Lorem ipsum...&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>The problem I have is with <strong>scrolling when the content of an item is longer than the length of the screen</strong>.</p>
  
  <p>For instance in the fiddle: </p>
  
  <ul>
  <li>Open the first collapsible item</li>
  <li>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)</li>
  <li>Open the second item</li>
  </ul>
  
  <p>=> 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.</p>
  
  <p><strong>Thus my question:</strong> Is there a smart way to force the page to set the "header" of the second item at the top of the screen?</p>
  
  <p>Thanks,
  T.</p>