I am using the Accordion menu to
filter a data table. The menu contains two filters, with multiple options under each. You can only have ONE
filter selected at a time. If you click between the two options under the first
filter, the style class, 'selected' is added and removed without a problem. If you click an option under the second
filter though, it DOESN'T remove the 'selected' class from the first
filter. Any help would be appreciated. Thank you.
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/accordion/jquery.accordion.js" type="text/javascript"></script>
<div>
<script type="text/javascript">
// <![CDATA[
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#navigation').accordion({active: 'h3.selected', header: 'h3.head', autoheight: false, });
jQuery('.xtraMenu').accordion({active: 'h4.selected',header: 'h4.head', autoheight: false, });
});
// ]]>
</script>
<style type="text/css">
h3, h4 {font-weight: normal}
h3.selected, h4.selected {font-weight:bold;}
</style>
<ul class="basic" id="navigation">
<li>
<h3 class="head"><a href="">Filter by Organization</a></h3>
<ul>
<li>
<ul class="xtraMenu basic">
<li>
<h4 class="head"><a href="">Association</a></h4>
</li>
<li>
<h4 class="head"><a href="">Business</a></h4>
</li>
</ul>
</li>
</ul>
</li>
<li>
<h3 class="head"><a href="">Filter by Type</a></h3>
<ul>
<li>
<ul class="xtraMenu basic">
<li>
<h4 class="head"><a href="">Basic</a></h4>
</li>
<li>
<h4 class="head"><a href="">Advanced</a></h4>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
