Add tab anywhere on shopify theme using only HTML & CSS

by Mozammel Tarek

You can add tab anywhere on shopify theme using only HTML & CSS. No need to use Jquery and Javascript! This code sample tested on debut shopify theme. If you are using another theme then you need to follow there grid framework.

<div class="page-width">
<div class="grid">
   <div class="grid__item medium-up--one-whole">
     <div class="tab-frame">
      <input type="radio" checked name="tab" id="tab1">
      <label for="tab1">REAL RESULTS</label>

      <input type="radio" name="tab" id="tab2">
      <label for="tab2">BENEFITS</label>

      <input type="radio" name="tab" id="tab3">
      <label for="tab3">HOW TO USE</label>

      <div class="tab mz-img-tab">
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
       <div class="tab">
         <h4>STRENGTHENING</h4>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

         <h4>DETOX</h4>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

         <h4>CLEANSING</h4>
         <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
       </div>
      <div class="tab">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
   </div>
</div>
</div>
</div>

<style>

div.tab-frame input{
display:none;
}
div.tab-frame label{
display:block;
float:left;
padding:5px 35px;
cursor:pointer;
text-align: center;
}
div.tab-frame input:checked + label{
background:black;
color:white;
cursor:default
}
div.tab-frame div.tab{
display:none;
padding: 30px;
clear:left
}

div.tab-frame input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
div.tab-frame input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
div.tab-frame input:nth-of-type(3):checked ~ .tab:nth-of-type(3){
display:block;

}
div.tab-frame {
   background: #FBFBFB;
   padding: 30px;
}

.mz-img-tab {
   padding: 30px 0 ! important;
}
</style>

And that’s it!

If you have any trouble, feel free to leave a comment below and I’ll do my best to help.

Add tab anywhere on shopify theme using only HTML & CSS

1 comment

Leave a comment