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