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

Question

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 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>  
</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.

Answer 1

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

Answer 2

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!