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

istanbul medyummedyumizmir medyumankara medyum
HacklinkHair Transplant istanbul
hacklink
istanbul evden eve nakliyat
hair transplant
istanbul anl?k haberler
extrabet
cratosroyalbet
casibom
romabet
romabet
romabet
casibom
casibom
marsbahis
holiganbet
casibom
https://deneme-bonuslarim-yeni.com/
deneme bonusu veren siteler
https://deneme-bonuslari-listesi.com/
deneme bonusu veren siteler
deneme bonusu veren siteler
deneme bonusu veren siteler
deneme bonusu veren siteler
Betpas
adana escort
esenyurt masaj salonubeylikdüzü masaj salonumasaj salonuesenyurt masaj salonubeylikdüzü masaj salonuba?ak?ehir masaj salonuavc?lar masaj salonumasaj salonuesenyurt masaj salonubeylikdüzü masaj salonuavc?lar masaj salonubahçe?ehir masaj salonu?irinevler masaj salonuesenyurt masaj salonumasaj salonuesenyurt masaj salonubeylikdüzü masaj salonuesenyurt masaj salonuesenyurt masaj salonuesenyurt escortesenyurt escortesenyurt escortesenyurt masaj salonuavc?lar masaj salonubeylikdüzü masaj salonumaltepe escortescort ?spartaescort fethiye