frontendsean
6/8/2018 - 10:13 AM

WN Distribution Product Tab

Formatted + metafields

<!--

===============================================================================
 
Wild Nutrition Custom Product Tabs
Version: 1.0
Copyright © 2018 Wild Nutrition
https://www.wildnutrition.com
 
Developer: Sean Porter
 
===============================================================================

-->

<script>
  
  // retrieve the element
element = document.getElementById(".tabs label");

// reset the transition by...
element.addEventListener("click", function(e) {
  e.preventDefault;
  
  // -> removing the class
  element.classList.remove("rotate.down");
  
  // -> triggering reflow /* The actual magic */
  // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered.
  // Oops! This won't work in strict mode. Thanks Felis Phasma!
  // element.offsetWidth = element.offsetWidth;
  // Do this instead:
  void element.offsetWidth;
  
  // -> and re-adding the class
  element.classList.add("rotate.up");
}, false);
  
</script>

<script>
  
  (".jscheck").click(function(){
    $(".jscheck").prop( "checked", false );
    $(this).prop( "checked", true );
});

</script>

<!-- PRODUCT TABS BEGIN -->

<div class="prod-tab-margin">
   <section>
      <div class="prodtabrow first clearfix">
         <div class="prodtabcontent gliving center wide">
            <div class="tabs">
               <input class="jscheck" type="radio" name="tabs" id="tabone" checked>
               {{ product.metafields.dosage_nutritional.title }}
               <div class="tab gliving">
                  <hr>
                  <meta charset="utf-8" />
                  <div class="descriptioncontainer n-m-bottom">
                     <div>
                        <ul>
                           {{ product.metafields.dosage_nutritional.size }}
                        </ul>
                     </div>
                     <div>
                        <ul>
                           {{ product.metafields.dosage_nutritional.dosage }}
                        </ul>
                     </div>
                  </div>
                  <div class="descriptioncontainer">
                     <div>
                        {{ product.metafields.dosage_nutritional.ingredients_left }}
                     </div>
                     <div>
                        {{ product.metafields.dosage_nutritional.ingredients_right }}
                     </div>
                  </div>
                  <meta charset="utf-8" />
               </div>
               <hr class="desktophide">
               <input type="radio" name="tabs" id="tabtwo">
               {{ product.metafields.description.title }}
               <div class="tab gliving">
                  <hr>
                  <div class="descriptioncontainer">
                     <div>
                        {{ product.metafields.description.left_column }}
                     </div>
                     <div>
                        {{ product.metafields.description.right_column }}
                     </div>
                  </div>
               </div>
               <hr class="desktophide">
               <input type="radio" name="tabs" id="tabthree">
               {{ product.metafields.ingredients.title }}
               <div class="tab gliving">
                  <hr>
                  <div class="descriptioncontainer">
                     <div>
                        <ul>
                           {{ product.metafields.ingredients.left_column }}
                        </ul>
                     </div>
                     <div>
                        <ul>
                           {{ product.metafields.ingredients.right_column }}
                        </ul>
                     </div>
                  </div>
               </div>
               <hr class="desktophide">
               <input type="radio" name="tabs" id="tabfour">
               {{ product.metafields.key_features.title }}
               <div class="tab gliving">
                  <hr>
                  <div class="v8"></div>
                  <div class="Grid Grid--gutters Grid--cols-12 u-textCenter">
                     <div class="Grid-cell iconright">
                        <div class="content-1of12"><img src="https://cdn.shopify.com/s/files/1/2503/1376/files/artificial.jpg?3140817636037500562"></div>
                     </div>
                     <div class="Grid-cell">
                        <div class="content-1of12"><img src="https://cdn.shopify.com/s/files/1/2503/1376/files/artificialcolours.jpg?3140817636037500562"></div>
                     </div>
                     <div class="Grid-cell">
                        <div class="content-1of12"><img src="https://cdn.shopify.com/s/files/1/2503/1376/files/artificalpreservatives.jpg?3140817636037500562"></div>
                     </div>
                     <div class="Grid-cell">
                        <div class="content-1of12"><img src="https://cdn.shopify.com/s/files/1/2352/0201/files/vegan.jpg?12432095458511780416"></div>
                     </div>
                     <div class="Grid-cell">
                        <div class="content-1of12"><img src="https://cdn.shopify.com/s/files/1/2503/1376/files/excipientfree.jpg?3140817636037500562"></div>
                     </div>
                     <div class="Grid-cell">
                        <div class="content-1of12"><img src="https://cdn.shopify.com/s/files/1/2503/1376/files/glutenfree.jpg?3140817636037500562"></div>
                     </div>
                     <div class="Grid-cell">
                        <div class="content-1of12"><img src="https://cdn.shopify.com/s/files/1/2503/1376/files/nongmo.jpg?3140817636037500562"></div>
                     </div>
                     <div class="Grid-cell">
                        <div class="content-1of12"><img src="https://cdn.shopify.com/s/files/1/2503/1376/files/corn.jpg?3140817636037500562"></div>
                     </div>
                     <div class="Grid-cell">
                        <div class="content-1of12"><img src="https://cdn.shopify.com/s/files/1/2503/1376/files/soya.jpg?3140817636037500562"></div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>
</div>

<!-- PRODUCT TABS END -->