How do I control jQuery UI to stay open on active links?

I am using jQuery UI for the sidebar navigation here: http://www.imadesign.com/dev/work/

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: http://www.imadesign.com/dev/work/infrastructure/inland_empire_utilities_agency, the Infrastructure accordion will remain open.

Here is the html:

<div id="accordion">
<div>
<h3><a href="#">Infrastructure</a></h3>
<div>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/green_valley_ranch">Green Valley Ranch</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/irvine_spectrum">Irvine Sp开发者_如何学编程ectrum</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/lynwood">Lynwood</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/inland_empire_utilities_agency">Inland Empire Utilities Agency</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/center_for_regenerative_studies">Center for Regenerative Studies</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/agriscapes">Agriscapes</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/sepulveda_basin_wildlife_area">Sepulveda Basin Wildlife Area</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/upper_newport_bay_regional_park">Upper Newport Bay Regional Park</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/los_angeles_world_airports">Los Angeles World Airports</a></p>
</div>  
</div>
<div>...

Here is the jQuery:

<script type="text/javascript">
$(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'); 
        });
});
</script>

Any guidance will be appreciated. Thanks.

You can look if url is presented in href of any of the links, and then show the corresponding div

its not perfect, but at least it is generic, you can modify it to your needs...

I've made a fiddle:

http://jsfiddle.net/TKgsQ/1/

EDIT:

Here's the code you must place in $(function(){ });, after initializing accordion

var arr = window.location.toString().split('/');
var currentUrl = arr[arr.length -1]; 
$("#accordion a").each(function(){
    arr = $(this).attr("href").split("/");
    var linkUrl = arr[arr.length -1]; //get last part
    if(linkUrl == currentUrl) 
        $(this).css('background-color','yellow').closest('div').show();
});

If you can hold on to the index of the accordion item selected, you can use the activate method for the accordion plug-in. Your modified jQuery could look like this:

$(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'); 
        });

    $("#accordion").accordion('option', 'activate', 0);
});

This will cause the 1st accordion item (index 0) to be open when loaded.

UPDATE: Here's a link to a jsFiddle I put together showing how to use the accordion's activate method. Hope this helps!

Try adding display: block !important; on the link div.

<div style="display: block !important;">
<p><a href="http://www.imadesign.com/dev/work/infrastructure/green_valley_ranch">Green Valley Ranch</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/irvine_spectrum">Irvine Spectrum</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/lynwood">Lynwood</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/inland_empire_utilities_agency">Inland Empire Utilities Agency</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/center_for_regenerative_studies">Center for Regenerative Studies</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/agriscapes">Agriscapes</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/sepulveda_basin_wildlife_area">Sepulveda Basin Wildlife Area</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/upper_newport_bay_regional_park">Upper Newport Bay Regional Park</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/los_angeles_world_airports">Los Angeles World Airports</a></p>
</div>

From the jQuery UI Accordian documentation

NOTE: If you want multiple sections open at once, don't use an accordion

An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:

jQuery(document).ready(function(){
$('.accordion.head').click(function() { $(this).next().toggle(); return false; }).next().hide(); });

Or animated:

jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle('slow'); return false; }).next().hide(); });