Trigger opening of a Zurb Foundation Accordion via URL hash link

Question

I'd really like to be able to "activate" / "open" a Zurb Foundation Accordion via the URL with the accordion pane in questions hash.

So like example.com/page#accordion1

Is this possible already with Foundation or is it easy to implement? I honestly haven't got a clue :-/

Thanks in advance for any help given!

Answer 1

You can do this by adding an unique attribute to each accordion title <div class="title" data-ref="panel-1"> In this case I added a data-ref attribute. Then you will need to add some jQuery to look at the hash and if it is a accordion panel, then click that panel.

HTML

<ul class="accordion">
  <li class="active">
    <div class="title" data-ref="panel-1">
      <h5>Accordion Panel 1</h5>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </li>
  <li>
    <div class="title" data-ref="panel-2">
      <h5>Accordion Panel 2</h5>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </li>
  <li>
    <div class="title" data-ref="panel-3">
      <h5>Accordion Panel 3</h5>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </li>
</ul>​

jQuery

jQuery(function() { // Document ready shorthand
    // Get the hash and remove the #
    var hash = window.location.hash.replace('#', '');

    if (hash != '') {
        // Cache targeted panel
        $target = $('.title[data-ref="' + hash + '"]');

        // Make sure panel is not already active            
        if (!$target.parents('li').hasClass('active')) {
            // Trigger a click on item to change panel
            $target.trigger('click');
        }
    }
});​

View in action

Edit code

One note: When in jsfiddle edit the hash will not work. Need to view in the full mode.

UPDATE

If you want to have a link that opens up a panel and updates hash. You will need to add a specific class to the link. In my example I add panel-btn

HTML

<a href="#panel-2" class="panel-btn">Goto Panel 2</a>

jQuery

$('.panel-btn').click(function(e){
    // Get the links href and remove the #
    target_hash = $(this).attr('href').replace('#','');  

    // Click targeted panel
    $('.title[data-ref="' + target_hash + '"]').trigger('click');

    // Update hash, so that if page is refreshed, target panel will open
    window.location.hash = target_hash;

    // Stop all default link functionality
    return false;
});

Updated jsfiddle view

Updated jsfiddle code

If you are looking for more of a history thing when each panel is clicked. You will need to add a click event to each .title and get its data-ref and change the hash to that, like this:

$('.title').click(function(){
  // Get the data-ref
  hash = $(this).attr('data-ref');

  // Set hash to panels hash
  window.location.hash = hash;
});

Answer 2

If you are using Foundation 5:

Foundations Accordion has a custom event click.fndtn.accordion you can use. It will take care of the proper open/closed states:

jQuery(document).ready(function($) {
  var hash = window.location.hash;

  if (hash != '') {
    $('[data-accordion] [href="' + hash + '"]').trigger('click.fndtn.accordion');
  }
});

See the example here, it will programatically open the second tab upon page load by detecting a window hash (simulated by a dummy hash in the code):

http://jsfiddle.net/ynyrrm99/

Answer 3

Link to the page without setting the a link to data-tab or any other settings. As of foundation 5.5.1 it will parse the uri with a hash on page load... meaning it doesn't matter how you set the originating link.

Answer 4

Set a variable to the hash in the URL, give the content panel div the same id as in your hash. Then add a class of .active to the panel with the same id as your link.

if(window.location.hash) {
  var hash = window.location.hash; 
  $( hash ).addClass( "active" );
}