Tabs description on the product page

[dev0912]

Please refer to the following from this commit - eb826eb021d54cd3a0cdf106ce55698615f52f93

• custom-theme.js (line from 0 to 21)
• snippets/product-tabs.liquid

Here are those code sets.

<div class="tabs-description--wrapper">
  <ul class="tabs">
    <li><a class="active" href="#benefits">Benefits</a></li>
    <li><a href="#ingredients">Ingredients</a></li>
    <li><a href="#howtouse">How to use</a></li>
    <li><a href="#shipping">Shipping</a></li>
  </ul>
  <ul class="tabs-content">
    <li class="active" id="benefits">
      <p>
        Go Condition helps optimize health and vitality by concentrating and delivering the most active polyphenois called <strong>Flavonoids.</strong>
      </p>
      <p>
        This patented product helps maintain healthy immune, congnitive, and physical performance and supports faster recovery.
      </p>
    </li>
    <li id="ingredients">
      <p>Ingredients description goes here</p>
    </li>
    <li id="howtouse">
      <p>The how to use description goes here</p>
    </li>
    <li id="shipping">
      <p>Shipping description goes here</p>
    </li>
  </ul>
</div>

$(document).ready(function() {
  $('ul.tabs').each(function(){
    var active, content, links = $(this).find('a');
    active = links.first().addClass('active');
    content = $(active.attr('href'));
    links.not(':first').each(function () {
      $($(this).attr('href')).hide();
    });

    $(this).find('a').click(function(e){
      active.removeClass('active');
      content.hide();
      active = $(this);
      content = $($(this).attr('href'));
      active.addClass('active');
      content.show();
      return false;
    });

  });
});