jQuery Shopify Timber Tabs

Question

I am trying to implement tabs on my product page within shopify. I have the tabs displaying and the tab seems to be changing when clicked, but the container isn't refreshing/loading the data

jQuery

<script>
$(document).ready(function() {
  $('ul.tabs').each(function(){
    // activate tabs
    var active, content, links = $(this).find('li');
    active = links.first().addClass('active');
    content = $(active.attr('href'));
    links.not(':first').each(function () {
      $($(this).attr('href')).hide();
    });
    // activate content
    $(this).find('li').click(function(e){
      active.removeClass('active');
      content.hide();
      active = $(this);
      content = $($(this).attr('href'));
      active.addClass('active');
      content.show();
      return false;
    });
  });
});

Tabs HTML

<div>
        <ul class="tabs">
          <li class="tab-title active"><a href="#tab-1">Product details</a></li>
          <li class="tab-title"><a href="#tab-2">Delivery options</a></li>
          <li class="tab-title"><a href="#tab-3">Returns</a></li>
        </ul>
        <div id="tab-1" class="tabs-content">
          <div class="content contained active"> 
            <div class="product-description rte" itemprop="description">
              {{ product.description }}
            </div>
          </div>  
        </div>
        <div id="tab-2" class="tabs-content">
          <div class="content contained"> 
            <div>       
                {% include 'shipping' %}   
            </div>
          </div>  
        </div>
        <div id="tab-3" class="content contained">
        {{ pages.returns.content }}
        </div>        
      </div>

score 0 · Accepted Answer · answered Feb 26 '16 at 11:34

0

This content = $(active.attr('href')); and content = $($(this).attr('href')); will be empty as li doesn't have any href. It should've been content = $(active.find('a').attr('href')); and content = $($(this).find('a').attr('href'));

Try this instead

$(document).ready(function() {
  $('ul.tabs').each(function(){
    // activate tabs
    var active, content, links = $(this).find('li');
    active = links.first().addClass('active');
    content = $(active.find('a').attr('href'));
    links.not(':first').each(function () {
      $($(this).find('a').attr('href')).hide();
    });
    // activate content
    $(this).find('li').click(function(e){
      active.removeClass('active');
      content.hide();
      active = $(this);
      content = $($(this).find('a').attr('href'));
      active.addClass('active');
      content.show();
      return false;
    });
  });
});

answered Feb 26 '16 at 11:34

HymnZzy

2,669
1
17
27

this partly works though the tabbed content still isn't displaying, this is the item
where i need the class applied
– Boss Nass Feb 26 '16 at 13:36
The code is working perfectly for me. The issue should be with some conflicting code. – HymnZzy Feb 26 '16 at 14:29
you can see from this codepen the tabs don't display the content http://codepen.io/anon/pen/jqOMZX – Boss Nass Feb 27 '16 at 03:03
It still works for me. See the screenshot from the pen - http://s15.postimg.org/64ryf61e3/Untitled.png – HymnZzy Feb 27 '16 at 05:07

jQuery Shopify Timber Tabs

1 Answers1