Question

I’m trying to figure out how to dynamically activate the correct content part of a jQuery UI Accordion menu depending on the page currently being viewed. I’ve searched extensively and it seems like others have had issues with this in the past, but I haven’t yet found a solution that works for me. I know that active can be set to open a certain index of the menu, but I need to do this dynamically.

I’m thinking that I can achieve what I want using the activate method, I just can’t seem to figure it out. I’d like to stay away from setting cookies as that usually won’t work with back/forward buttons and direct navigation via a specific url. Anyone have any ideas? Thanks in advance!

Here is the simplified structure of my menu:

<div id="menu">
    <div id="sections">
        <div class="grouping accordion">
            <a id="heading1" href="#">Heading #1</a>
            <div class="sub-items">
                <a href="/item1">Item #1</a>
                <br />
                <a href="/item2">Item #2</a>
            </div>
        </div>
        <div class="grouping accordion">
            <a id="heading2" href="#">Heading #2</a>
            <div class="sub-items">
                <a href="/item4">Item #4</a>
                <br />
                <a href="/item5">Item #6</a>
            </div>
        </div>
    </div>
</div>

And here is my jQuery Accordion init:

$('#sections').accordion({
    header: '> .accordion > a',
    autoHeight: false,
    collapsible: true,
    active: false,
    animated: 'slide'
});

So if you are currently on the /item4 page for example, the group under Heading #2 should be expanded.

EDIT:
I found what seems to be a pretty good solution and posted that as an answer below, hopefully this will help someone with a similar problem!

Answer 1

While working on some CSS for the active headings on the menu I stumbled on a pretty clean and easy solution. Looks like I might have been overthinking things!

Using the same HTML as in the question, here’s the JavaScript that is working for me:

//accordion menu
$('#sections').accordion({
    header: '> .accordion > a',
    autoHeight: false,
    collapsible: true,
    active: '.selected',
    animated: 'slide'
});

//add currentPage class to current menu item based on url
var url = window.location.href;
url = url.substr(url.lastIndexOf("/") + 1);
$("#sections").find("a[href='" + url + "']").addClass("currentPage");

//get id of header anchor tag
var headerId = $(".currentPage").parents(".accordion").children("a").attr("id");

//check if headerId is set, if so activate that id
if (headerId) {
    $('#sections').accordion('option', 'animated', false);
    $('#sections').accordion('activate', $('#' + headerId));
    $('#sections').accordion('option', 'animated', 'slide');
}

This solution is pretty simple, it gets the current page from the url and compares it against each link in the accordion menu. If it finds a match, it gives that link a class of currentPage (which allows us to then style that link accordingly via css). Then it looks for a parent of that link with a class of .accordion, finds the first child link (the accordion header) and grabs the header’s id. Assuming a header id has been found, we can then use the activate method to expand the correct section.