Open collapsed menu based on anchor link?

[chasegiunta]

Forgive me if this has already been asked & answered. I can't seem to find it within the issues nor find an example...

I'd like to be able to link to a certain collapsible menu on a page, and that menu should be toggled open based on the ID/anchor link referenced in the URL. Is this possible (hopefully shouldn't need specific script code for every link) and are there any examples?

[jangeltun]

Here is one example.

<a id="firstLink" href="#gotoThisAnchor">Go to anchor in section 1</a>
<button id="btn-open-all">Open All</button> <button id="btn-close-all">Close All</button>

<div id="firstLevel" class="openAll closeAll">

    <h2>Section 1</h2>
    <div>Lorem ipsum dolor sit amet, amet architecto suscipit mauris venenatis congue. Proin in, maecenas id fusce. Et felis. Wisi mi eu eget, vivamus eleifend quam, cum a etiam facilisis libero ridiculus. Massa nulla volutpat suspendisse vel mi, laoreet eu lectus, enim rhoncus et vitae mauris tristique phasellus, quis odio tortor phasellus, blandit elit. Justo felis luctus quis, taciti aliquam quis litora, id sed, a sit tellus, wisi adipiscing. Eget commodo. Massa in dignissim duis ac ornare. Faucibus eget, donec in mollis et at. Lacinia praesent pede dictum volutpat sed, iaculis est aliquam donec volutpat lorem, in non nunc parturient purus, felis vehicula senectus morbi facilisis montes nascetur, sagittis consectetur velit hendrerit rhoncus lectus gravida. Ante in id etiam, tempus vel sem, eget potenti, at diam faucibus vitae at pretium viverra. A tellus rutrum, cras integer aliquet et, ac tempor non ac sit, amet lacus sem, enim consequat eleifend elit dolor.

        <div id="secondLevel" class="openAll closeAll">
        <h2>Sub A</h2>
        <div>Lorem ipsum dolor sit amet, amet architecto suscipit mauris venenatis congue. Proin in, maecenas id fusce. Et felis. Wisi mi eu eget, vivamus eleifend quam, cum a etiam facilisis libero ridiculus. Massa nulla volutpat suspendisse vel mi, laoreet eu lectus, enim rhoncus et vitae mauris tristique phasellus, quis odio tortor phasellus, blandit elit. Justo felis luctus quis, taciti aliquam quis litora, id sed, a sit tellus, wisi adipiscing. Eget commodo. Massa in dignissim duis ac ornare. Faucibus eget, donec in mollis et at. Lacinia praesent pede dictum volutpat sed, iaculis est aliquam donec volutpat lorem, in non nunc parturient purus, felis vehicula senectus morbi facilisis montes nascetur, sagittis consectetur velit hendrerit rhoncus lectus gravida. Ante in id etiam, tempus vel sem, eget potenti, at diam faucibus vitae at pretium viverra. A tellus rutrum, cras integer aliquet et, ac tempor non ac sit, amet lacus sem, enim consequat eleifend elit dolor.

            <div id="thirdLevel" class="openAll closeAll">
            <h2>Sub sub A</h2>
            <div>Lorem ipsum dolor sit amet, amet architecto suscipit mauris venenatis congue. Proin in, maecenas id fusce. Et felis. Wisi mi eu eget, vivamus eleifend quam, cum a etiam facilisis libero ridiculus. Massa nulla volutpat suspendisse vel mi, laoreet eu lectus, enim rhoncus et vitae mauris tristique phasellus, quis odio tortor phasellus, blandit elit. Justo felis luctus quis, taciti aliquam quis litora, id sed, a sit tellus, wisi adipiscing. Eget commodo. Massa in dignissim duis ac ornare. Faucibus eget, donec in mollis et at. Lacinia praesent pede dictum volutpat sed, iaculis est aliquam donec volutpat lorem, in non nunc parturient purus, felis vehicula senectus morbi facilisis montes nascetur, sagittis consectetur velit hendrerit rhoncus lectus gravida. Ante in id etiam, tempus vel sem, eget potenti, at diam faucibus vitae at pretium viverra. A tellus rutrum, cras integer aliquet et, ac tempor non ac sit, amet lacus sem, enim consequat eleifend elit dolor.</div>

            <h2 id="gotoThisAnchor">Sub sub B</h2>
            <div>Anchor is loacated here</div>
            </div>

        </div>

        <h2>Sub B</h2>
        <div>Content...</div>
        </div>

    </div>

    <h2>Section 2</h2>
    <div>Content...</div>

    <h2>Section 3</h2>
    <div>Content...</div>

</div>

<p>Bottom</p>

<script>
var firstLevel = new jQueryCollapse($("#firstLevel"));

var secondLevel = new jQueryCollapse($("#secondLevel"));

var thirdLevel = new jQueryCollapse($("#thirdLevel"));

$("#firstLink").click(function() {
    firstLevel.open(0);
    secondLevel.open(0);
    thirdLevel.open(1);

    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);

});

$("#btn-open-all").click(function() {
$(".openAll").trigger("open")
})

$("#btn-close-all").click(function() {
$(".closeAll").trigger("close")
})

//demo.open(); // Open all sections
//demo.close(); // Close all sections
//demo.open(0); // Open first section
//demo.open(1); // Open second section
//demo.close(0); // Close first section
//demo.toggle(1); // Toggle second section
</script>