Issue:
Need to open a specific section of an accordion upon page load.
Solutions:
____________________________________________________________
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 () {
$('.active').next().hide().removeClass('active');
$('#<computedvalue>').addClass('active').next().show();
};
Note: if the menu tag you are passing is msection, then you would write:
@UrlQueryString("msection")
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.
jQuery('#navigation').accordion({
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) {
$("#sidebar").accordion("activate",
li.parent().parent().prev());
}
});
____________________________________________________________
Note:
The above solutions assume a JQuery structure like this:
<div id="maccordion">
<h3 class="mhead"><a href="#">Category 1</a></h3>
<div id="cat1">
<ul>
<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>
</ul>
</div>
<h3 class="mhead"><a href="#">Category B</a></h3>
<div id="cat2">
<ul>
<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>
</ul>
</div>
<h3 class="mhead"><a href="#">Category J</a></h3>
<div id="cat3">
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
previous page
|