Search code examples
javascripttabsbourbon

Bourbon Refills How-To Link To Tabs

I'm using the minimal accordion tabs from the bourbon refills site, http://refills.bourbon.io/ and would like to know how I can link to a specific tab from another page in my site. When the page with the tabs loads the first tab is always displayed.

I'd like to know how to link to the page with tabs from a different page on my site but instead of having the first default tab active have the second or third tab be active. You can see exactly what I'm referring to by visiting http://codepen.io/andrewjcurrie/details/qbqvxo/ and below is the JavaScript that powers the tabs.

 $(document).ready(function () {
 $('.accordion-tabs-minimal').each(function(index) {
 $(this).children('li').first().children('a')
 .addClass('is-active').next().addClass('is-open').show();});
 $('.accordion-tabs-minimal').on('click', 'li > a.tab-link', function(event) {
 if (!$(this).hasClass('is-active')) { event.preventDefault();
 var accordionTabs = $(this).closest('.accordion-tabs-minimal');
 accordionTabs.find('.is-open').removeClass('is-open').hide();
 $(this).next().toggleClass('is-open').toggle();
 accordionTabs.find('.is-active').removeClass('is-active');
 $(this).addClass('is-active'); } else {
 event.preventDefault();}});});

As you can see on the pen, I'm hoping to have the links work with hash tags. I'd like to be able to add #Second_Tab to the base URL and have the second tab become active when that link is accessed. Any tips or suggestions on how best to accomplish this would be greatly appreciated, Thanks!

Solution

  • Andrew.

    Three steps to get this to work:

    1. remove is-active from the first tab-link in your HTML
    2. add the necessary IDs to each of your tabs (following your example, I added id="Second_Tab" etc.
    3. update the first JS function as follows:

    $('.accordion-tabs-minimal').each(function(index) {
  if (window.location.hash) {
    var hash = $.trim(window.location.hash);
    $(hash).addClass('is-active').next().addClass('is-open').show();
  } else {
    $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
  }
});

    This first checks if the URL has a hash and, if so, adds the necessary classes to that tab and content and displays them. If no hash is in the URL, it instead does the default behavior of displaying the first tab. You can see my working CodePen here http://codepen.io/angeliquejw/pen/xVqzKV?editors=1000