Ad

JQuery Shopify Timber Tabs

- 1 answer

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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#tab-1">Product details</a></li>
          <li class="tab-title"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#tab-2">Delivery options</a></li>
          <li class="tab-title"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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>  
Ad

Answer

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;
    });
  });
});
Ad
source: stackoverflow.com
Ad