jump to anchor and expand nested JQuery Mobile collapsible

Question

I'm trying to jump to an anchor within a nested Jquery Mobile Collapsible. How do I do that? Any help will be greatly appreciated.

I'm using the latest JQuery and JQuery Mobile.

Demo of what I'm trying to accomplish jsfiddle.net/jangeltun/udbu8mfr/9/

Answer 1

You need to use script to expand all parent collapsibles of the target anchor, and then scroll the page to that anchor:

<a href="#nestedAnchor1" class="btnGO1">Go to anchor in Nested Child in Section 1</a><br>
<a href="#nestedAnchor2" class="btnGO1">Go to anchor in Nested Child in Section 2</a>

$('.btnGO1').on('click', function() {
    var elem = $(this).prop("href");
    elem = elem.substr(elem.lastIndexOf("#"));
    var $anch = $(elem);
    //expand all parent collapsibles
    $anch.parents('[data-role="collapsible"]').collapsible('expand');
    //scroll to anchor
    var top = $anch.offset().top;
    $.mobile.silentScroll( top );

    return false;
});

Updated FIDDLE