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 -->