jQuery Accordion Plugin: removeClass('selected')

Question

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>

Answer 1

Try using the change event for the second filter to remove the 'selected' class of the first filter.

jQuery( ".xtraMenu" ).accordion({
   active: 'h4.selected',
   header: 'h4.head',
   autoheight: false,
   change: function() {
       jQuery("#navigation > h3").each(function() {
           jQuery(this).removeClass('selected');
       });
   }
});