1. Create a new snippets and pase the following code in it and include snippets where you want to display tabs.

<script
  src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div class="kkduniya-desc">
   <ul class="kktabs clearfix">
       <li><a href="#tab-1" class="active">Details</a></li>
       <li><a href="#tab-2">How To</a></li>
       <li><a href="#tab-3">Ingredients</a></li>
       <li><a href="#tab-4">Shipping</a></li>
   </ul>
   <div class="kkduniya-content">
       <div id="tab-1" class="tab active">
                Enter Product Description Over Here.
       </div>
       <div id="tab-2" class="tab">
                Enter how to use of products details, etc.
       </div>
       <div id="tab-3" class="tab">
                Enter product ingredients details over here.
       </div>
       <div id="tab-4" class="tab">
                Enter shopping information.
       </div>
   </div>
 </div>

<script>
 $(document).ready(function() {
   $('ul.kktabs').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;
     });
     
   });
 });
 </script>

<style>
 
 .kkduniya-desc ul.kktabs{
   margin: 0px;
   padding: 0px;
   border-radius: 0px;
   top: 1px;
   position: relative;
 }

 .clearfix{
  clear: both;
 }
 
 .kktabs li{
   background-color: #fff;
   display: inline;
   position: relative;
   z-index: 0;
   border-radius: 0px;
   margin: 0 -5px;
   padding: 0;
 }
 
 .kkduniya-desc ul li:first-child{
    margin: 0px;
 }
 
 .kkduniya-desc ul li a{
   display: inline-block;
   border: 1px solid #e9e9e9;
   padding: 1.2em 1em;
   font-weight: 700;
   color: #515151;
   text-decoration: none;
   font-size: 12px;
   text-transform: uppercase;
 }
 
 .kkduniya-desc ul li a.active{
   background: #ded9d9ee;
   border-bottom-color: #fafafa;
 }
 
 .kkduniya-desc .tab{
   display: block;
   border: 1px solid #e9e9e9;
   padding: 15px;
   background: #fafafa;
   font-size: 14px;
   border-radius: 0px;
 }
 </style>

0 Comments

Leave a Comment