A simple way to make sure content in jQuery Mobile collapsible sets remains visible when expanding each section by bringing the section being opened to the top. This way, people have to scroll less, improving their user experience on the website.
A Pen by Iván Melgrati on CodePen.
| <p>Ut quis semper justo. Nullam pretium lacus vel quam aliquet molestie. </p> | |
| <p>Nullam blandit odio odio, at aliquam ante aliquet vitae. Nunc efficitur eu ipsum vel feugiat.</p> | |
| <p>Donec porttitor fringilla elit. Nullam mi arcu, efficitur at orci lobortis, elementum sagittis lacus. Nulla facilisi. </p> | |
| <div data-role="collapsibleset" data-theme="a" data-content-theme="a" id="the-collapsible"> | |
| <div data-role="collapsible"> | |
| <h3>Section 1</h3> | |
| <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod, dui eget porta semper, magna metus convallis diam, vehicula venenatis quam dolor quis leo. </p> | |
| <p>Donec lectus purus, sollicitudin rhoncus ipsum vitae, vulputate hendrerit erat. Suspendisse varius eleifend felis, ac tempus lectus pretium nec.</p> | |
| <p> Suspendisse convallis sem eu risus sodales, at laoreet sapien porttitor. Donec at odio posuere, tristique lacus a, pretium erat. Nulla non finibus turpis.</p> | |
| <p> Maecenas auctor dapibus pretium. Maecenas condimentum luctus gravida. Nulla dignissim bibendum nunc, at posuere mi tempor quis. </p> | |
| <p>Nunc eget consequat felis, eget faucibus turpis. Aenean eget lorem sagittis, fringilla est et, convallis quam. | |
| </p> | |
| </div> | |
| <div data-role="collapsible"> | |
| <h3>Section 2</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod, dui eget porta semper, magna metus convallis diam, vehicula venenatis quam dolor quis leo. </p> | |
| <p>Donec lectus purus, sollicitudin rhoncus ipsum vitae, vulputate hendrerit erat. Suspendisse varius eleifend felis, ac tempus lectus pretium nec.</p> | |
| <p> Suspendisse convallis sem eu risus sodales, at laoreet sapien porttitor. Donec at odio posuere, tristique lacus a, pretium erat. Nulla non finibus turpis.</p> | |
| <p> Maecenas auctor dapibus pretium. Maecenas condimentum luctus gravida. Nulla dignissim bibendum nunc, at posuere mi tempor quis. </p> | |
| <p>Nunc eget consequat felis, eget faucibus turpis. Aenean eget lorem sagittis, fringilla est et, convallis quam. | |
| </p> | |
| </div> | |
| <div data-role="collapsible"> | |
| <h3>Section 3</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod, dui eget porta semper, magna metus convallis diam, vehicula venenatis quam dolor quis leo. </p> | |
| <p>Donec lectus purus, sollicitudin rhoncus ipsum vitae, vulputate hendrerit erat. Suspendisse varius eleifend felis, ac tempus lectus pretium nec.</p> | |
| <p> Suspendisse convallis sem eu risus sodales, at laoreet sapien porttitor. Donec at odio posuere, tristique lacus a, pretium erat. Nulla non finibus turpis.</p> | |
| <p> Maecenas auctor dapibus pretium. Maecenas condimentum luctus gravida. Nulla dignissim bibendum nunc, at posuere mi tempor quis. </p> | |
| <p>Nunc eget consequat felis, eget faucibus turpis. Aenean eget lorem sagittis, fringilla est et, convallis quam. | |
| </p> | |
| </div> | |
| </div> |
| $(document).on('pagebeforeshow', function() { | |
| $("[data-role='collapsible']").collapsible({ | |
| collapse: function(event, ui) { | |
| $(this).children().next().slideUp(350); | |
| }, | |
| expand: function(event, ui) { | |
| $(this).children().next().slideDown(500); | |
| jQuery('html, body').animate({ | |
| scrollTop: jQuery(this).offset().top - 10 | |
| }, 500); | |
| } | |
| }); | |
| }); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> |
| <link href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet" /> |