Time for some Javascript!

So I’ve implemented the jQueryUI Accordion as a menu system for a CMS that I’m building and I’ve noticed that the active header will not open automatically.

This means that when a user hits a link to visit a new page, the accordion will not display their current menu item as active.

Time for some code!


I’ve used the same markup as the example, except that because it’s a menu, I needed some bullet points.

<div id='accordion'>
	<h3>First Heading</h3>
			<!-- Add an active class how you want to -->
			<li class='active'>First item</li>
			<li>Second item</li>
	<!-- More items repeated -->


So how can we use the markup to tell the javascript which heading to mark active? Turns out it’s remarkably simple.

$(function () {

//  Accordian navigation
        heightStyle: "content"

    $('#accordion h3').each(function (i,e) {
        if ($(e).next('div').find('li.active').length > 0) {
            $("#accordion").accordion("option", "active", i);

The trick here is the use of next() to select the immediately adjacent div without selecting all the other siblings.

Go make a brew!

All done, that’s it!