frontendsean
4/26/2018 - 11:46 AM

Product Tab - Snippet Code

Product tab code for wildnutrition.com

<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>
               <label class="gliving" for="tabone">Dosage &amp; Nutritional Information <i class="fa rotate chevron">><a href="#tabone"></a></i>
               </label>
               <div class="tab gliving">
                  <hr>
                  <meta charset="utf-8" />
                  <div class="descriptioncontainer n-m-bottom">
                     <div>
                        <ul>
                           <li><strong>Size: </strong>60 Capsules (1 month supply).</li>
                        </ul>
                     </div>
                     <div>
                       <ul>
                         <li><strong>Dosage: </strong>2 capsules per day as a prophylactic dose.</li>
                          <li>4 capsules on the onset of infection or established inflammation.</li>
                         <li>Dose can increase to 8 per day if required.</li>
                       </ul>
                     </div>
                  </div>
                  <div class="descriptioncontainer">
                     <div>
                        <table class="prodtable" width="100%" cellspacing="0">
                           <tbody>
                              <tr class="headings">
                                 <th style="text-align: left; background-color: #e6e2df!important;">2 capsules provide:</th>
                                 <th style="text-align: left; background-color: #e6e2df!important;">Claim</th>
                                 <th style="text-align: left; background-color: #e6e2df!important;">% EU NRV</th>
                              </tr>
                            <tr>
<td>Vitamin D3</td>
<td>5.00μg</td>
<td>100</td>
</tr>
<tr>
<td>Vitamin C</td>
<td>40.00mg</td>
<td>50</td>
</tr>
<tr>
<td>Niacin</td>
<td>15.00mg NE</td>
<td>94</td>
</tr>
<tr>
<td>Zinc</td>
<td>10.00mg</td>
<td>100</td>
</tr>
<tr>
<td>Copper</td>
<td>200.00μg</td>
<td>20</td>
</tr>
<tr>
<td>Selenium</td>
<td>55.00μg</td>
<td>100</td>
</tr>
<tr>
<td>Chromium</td>
<td>25.00μg</td>
<td>63</td>
</tr>
<tr>
<td>Beta-Carotene</td>
<td>2.00mg</td>
<td>N/A</td>
</tr>
 
                           </tbody>
                        </table>
                     </div>
                     <div>
                        <table class="prodtable" width="100%" cellspacing="0">
                           <tbody>
                              <tr class="headings">
                                 <th style="text-align: left; background-color: #e6e2df!important;">2 capsules provide:</th>
                                 <th style="text-align: left; background-color: #e6e2df!important;">Claim</th>
                                 <th style="text-align: left; background-color: #e6e2df!important;">% EU NRV</th>
                              </tr>
<tr>
<td>Maitake mushroom powder (Mycelised)</td>
<td>200.00mg</td>
<td>N/A</td>
</tr>
<tr>
<td>Oyster mushroom powder (Mycelised)</td>
<td>200.00mg</td>
<td>N/A</td>
</tr>
<tr>
<td>N-Acetyl Cysteine</td>
<td>150.00mg</td>
<td>N/A</td>
</tr>
<tr>
<td>Elderberry extract</td>
<td>150.00mg</td>
<td>N/A</td>
</tr>
<tr>
<td>Bioflavonoids</td>
<td>4.00mg</td>
<td>N/A</td>
</tr>
<tr>
<td>Energy, fat, protein, carbohydrate</td>
<td>Negligible</td>
<td></td>  
</tr>
 
                             
                           </tbody>
                        </table>
                     </div>
                  </div>
                  <meta charset="utf-8" />
               </div>
               <hr class="desktophide">
               <input type="radio" name="tabs" id="tabtwo">
               <label class="gliving" for="tabtwo">Description <i class="fa rotate chevron">><a href="#tabtwo"></a></i></label>
               <div class="tab gliving">
                  <hr>
                  <div class="descriptioncontainer">
                     <div>
                        <p>Our expertly formulated Food-Grown® Immune Support is a powerful blend of biomass mycelial mushrooms, N Acetyl Cysteine, Elderberry and Food-Grown® vitamins and minerals to support the normal function of the immune system and promote our natural defences against infection. Our unique product includes the pioneering process of mycellial biomass to produce our mushrooms.</p>
                     </div>
                     <div>
                        <p>This intensifies the immune supporting properties of beta-glucans, polysaccharides and antioxidants, enzymes super oxide dismutase and glutathione peroxidase naturally found in mushroom complexes.</p>
                     </div>
                  </div>
               </div>
               <hr class="desktophide">
               <input type="radio" name="tabs" id="tabthree">
               <label class="gliving" for="tabthree">Ingredients <i class="fa rotate chevron">><a href="#tabthree"></a></i></label>
               <div class="tab gliving">
                  <hr>
                  <div class="descriptioncontainer">
                     <div>
                       <ul>
                        <li><strong>Ingredients:</strong> Vitamin C and Bioflavonoids incorporated in Citrus pulp; Mineral enhanced Yeast providing Vitamin D3, Copper and Selenium; Lactobacillus bulgaricus providing Niacin, Zinc and GTF** Chromium; Beta-Carotene incorporated in Carrot concentrate; N-Acetyl Cysteine; Elderberry extract; Maitake Mushroom powder (Mycelised) and Oyster Mushroom powder (Mycelised). Vegetable cellulose (capsule shell).</li>
                         <p></p>
                         <li><strong>Free from:</strong> Excipients, wheat, gluten-containing ingredients, soya, artificial colours, added sugars, flavourings &amp; preservatives. Contains no live yeast at time of manufacture.</li>
                       </ul>
                      </div>
                     <div>
                       <ul>
                        <li><strong>Cautionary advice: </strong> If you are pregnant, breastfeeding, taking medication or under medical supervision, please consult your healthcare practitioner before taking any food supplement. Store in a cool, dry place away from direct sunlight (this product does not need to be refrigerated). Keep out of reach of children. Food supplements are not to be used as a substitute for a varied & balanced diet and healthy lifestyle.</li>
                       </ul>
                         </div>
                  </div>
               </div>
               <hr class="desktophide">
               <input type="radio" name="tabs" id="tabfour">
               <label class="gliving" for="tabfour">Key Features <i class="fa rotate chevron">><a href="#tabfour"></a></i></label>
              <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/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/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/foodgrownnut.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/kpsher.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/raw.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 class="Grid-cell">
                        <div class="content-1of12"><img src="https://cdn.shopify.com/s/files/1/2503/1376/files/vegetarian.jpg?3140817636037500562"></div>
                     </div>
                     <div class="Grid-cell"><div class="content-1of12"><img class="lasticon" src="https://cdn.shopify.com/s/files/1/2352/0201/files/wheatfree.jpg?18178292946191390336"></div></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>
</div>

<!-- PRODUCT TABS END -->