Question

I have links that are inside a jquery accordion on a page. When a visitor clicks on one of those links then hits the back button to return to my page, I’d like the accordion that contained the link to be open.

My assumption was that I should use the navigation:true setting and add hashtags to the different accordions, but that isn’t working for me.

Here is what I have:

// lots of content above here // 

<div id="accordion">

<h5><a href="#area1">Area 1 header</a></h5>
<div>
    <ul>
        <li><a href='http://www.externalsite.com'>Link to an external site</li>
    </ul>
</div>

<h5><a href="#area2">Area 2 header</a></h5>
<div>
    <ul>
        <li><a href='http://www.anotherexternalsite.com'>Link to another external site</li>
    </ul>
</div>

// At the bottom of the page below the jquery and jquery ui references //

<script type="text/javascript">
    $(document).ready(function(){
       $("#accordion").accordion({active:false,collapsible:true,autoHeight:false,navigation:true});
    });
</script>

The accordion works just fine while I’m in the page. If I click one of the external links and then click the back button, all the accordions are collapsed. I think it will be a irritating experience for people to have to open the accordion they were previously on to click the next link – or read more about that area, which is why I’m trying to make this change.

Am I headed down the right road using the navigation option?

Answer 1

Here’s a solution I created using the BBQ plugin from Ben Alman http://benalman.com/projects/jquery-bbq-plugin/

<script>$(function(){
$('#accordion').accordion({ collapsible: true, autoHeight: false, navigation: true });

var accordion = $('.ui-accordion');    
acc_a_selector = '.ui-accordion-header a ';  
accordion.accordion({ event: 'change'});    
accordion.find( acc_a_selector ).click(function(){
    var state = {},
    id = $(this).closest( '.ui-accordion' ).attr( 'id' ),
    idx = $(this).parent().parent().length;
    ndx = $(this).parent().index() * 0.5;
    state[ id ] = ndx;
    hashlink = $(this).attr('href');
    $.bbq.pushState( state );
});

$(window).bind( 'hashchange', function(e) { 
    accordion.each(function(){
        var idx = $.bbq.getState( this.id, true ) || 0;
        accordion.children('h3').eq(idx).filter(':not(.ui-state-active)').parent().accordion( "option", "active", idx);
    });
})

$(window).trigger( 'hashchange' );});</script>

and the HTML should be relatively the same:

<div id="accordion">
<h3><a href="#">Area 1 header</a></h3>
<div>
    <ul>
        <li><a href='http://www.externalsite.com'>Link to an external site</a></li>
    </ul>
</div>
<h3><a href="#">Area 2 header</a></h3>
<div>
    <ul>
        <li><a href='http://www.anotherexternalsite.com'>Link to another external site</a></li>
    </ul>
</div></div>