title: How do I control jQuery UI to stay open on active links?
body: <p>I am using jQuery UI for the sidebar navigation here: <a href="http://www.imadesign.com/dev/work/">http://www.imadesign.com/dev/work/</a></p>
  
  <p>I would like to be able to keep the accordion open on the current active section. So for example if I am on this page: <a href="http://www.imadesign.com/dev/work/infrastructure/inland_empire_utilities_agency">http://www.imadesign.com/dev/work/infrastructure/inland_empire_utilities_agency</a>, the <strong>Infrastructure</strong> accordion will remain open.</p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;div id="accordion"&gt;
  &lt;div&gt;
  &lt;h3&gt;&lt;a href="#"&gt;Infrastructure&lt;/a&gt;&lt;/h3&gt;
  &lt;div&gt;
  &lt;p&gt;&lt;a href="http://www.imadesign.com/dev/work/infrastructure/green_valley_ranch"&gt;Green Valley Ranch&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href="http://www.imadesign.com/dev/work/infrastructure/irvine_spectrum"&gt;Irvine Spectrum&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href="http://www.imadesign.com/dev/work/infrastructure/lynwood"&gt;Lynwood&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href="http://www.imadesign.com/dev/work/infrastructure/inland_empire_utilities_agency"&gt;Inland Empire Utilities Agency&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href="http://www.imadesign.com/dev/work/infrastructure/center_for_regenerative_studies"&gt;Center for Regenerative Studies&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href="http://www.imadesign.com/dev/work/infrastructure/agriscapes"&gt;Agriscapes&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href="http://www.imadesign.com/dev/work/infrastructure/sepulveda_basin_wildlife_area"&gt;Sepulveda Basin Wildlife Area&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href="http://www.imadesign.com/dev/work/infrastructure/upper_newport_bay_regional_park"&gt;Upper Newport Bay Regional Park&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href="http://www.imadesign.com/dev/work/infrastructure/los_angeles_world_airports"&gt;Los Angeles World Airports&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;  
  &lt;/div&gt;
  &lt;div&gt;...
  </code></pre>
  
  <p>Here is the jQuery:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function(){
  
      // Accordion
      $("#accordion").accordion({ header: "h3", autoHeight: false, collapsible: true, active:false });
  
      //hover states on the static widgets
      $('#dialog_link, ul#icons li').hover(
          function() { $(this).addClass('ui-state-hover'); }, 
          function() { $(this).removeClass('ui-state-hover'); 
          });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any guidance will be appreciated. Thanks.</p>