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

<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>
   <div class="kkduniya-content">
       <div id="tab-1" class="tab active">
                Enter Product Description Over Here.
       <div id="tab-2" class="tab">
                Enter how to use of products details, etc.
       <div id="tab-3" class="tab">
                Enter product ingredients details over here.
       <div id="tab-4" class="tab">
                Enter shopping information.

 $(document).ready(function() {
     var active, content, links = $(this).find('a');
      active = links.first().addClass('active');
      content = $(active.attr('href'));
     links.not(':first').each(function () {
       active = $(this);
       content = $($(this).attr('href'));
       return false;

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

  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;


Leave a Comment