JQuery Accordion Page Load Open Samples

Mindwatering Incorporated

Author: Tripp W Black

Created: 01/04/2012 at 11:42 PM


Notes Developer Tips

Need to open a specific section of an accordion upon page load.


Solution A:
Target by passing via URL or by hardcoding into each page header.
The following solution works well when you pass the section to open on the URL.:

$(document).ready(function () {
Note: if the menu tag you are passing is msection, then you would write:
or simply MyCatFld if MyCatFld is a field in the current document which contains the category

Solution B:
Crawl the links within the accordion until you find a match and then activate it.

Example 1: This example uses the "mhead" class/tag to check the URLs.
active: false,
header: '.mhead',
navigation: true,
event: 'mouseover',
fillSpace: true,
animated: 'easeslide'

Example 2: This example crawls them all and compares the URLs.
(This one has significant shortcomings since you have to count up or if two sections have the same link.)
$("#sidebar td").each(function () {
var td = $(this);
var a = td[0].firstChild;
if (a.href == location.href) {


The above solutions assume a JQuery structure like this:
<div id="maccordion">
<h3 class="mhead"><a href="#">Category 1</a></h3>
<div id="cat1">
<li><a href="somepage1a">List item 1a</a></li>
<li><a href="somepage1b">List item 1b</a></li>
<li><a href="somepage1c">List item 1c</a></li>
<h3 class="mhead"><a href="#">Category B</a></h3>
<div id="cat2">
<li><a href="somepage2a">List item 2a</a></li>
<li><a href="somepage2b">List item 2b</a></li>
<li><a href="somepage2c">List item 2c</a></li>
<h3 class="mhead"><a href="#">Category J</a></h3>
<div id="cat3">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>

previous page