jQuery Mobile page jumping to top when a collapsible is clicked

Question

I have a jQuery Mobile page with a panel navigation. The last two elements are collapsibles with further menu items. Expanding or collapsing these causes the page to jump to

Answer 1

This appears to be an open bug:
https://github.com/jquery/jquery-mobile/issues/7055
https://github.com/jquery/jquery-mobile/issues/6688

As a raw fix for now, a script like this can be placed after the reference to jQuery Mobile source:

$(function() {
    $.mobile.panel.prototype._positionPanel = function() {
        var self = this,
            panelInnerHeight = self._panelInner.outerHeight(),
            expand = panelInnerHeight > $.mobile.getScreenHeight();

        if ( expand || !self.options.positionFixed ) {
            if ( expand ) {
                self._unfixPanel();
                $.mobile.resetActivePageHeight( panelInnerHeight );
            }
          //window.scrollTo( 0, $.mobile.defaultHomeScroll );
        } else {
            self._fixPanel();
        }
    };
});

This will override the widget internal method (note the commented line) without the need of changing jQuery Mobile source code directly (which is not possible when the framework is loaded from CDN).

Here's a live example.