How To Create Custom Tab Using Jquery

In this topic,

We are going to see how to create a custom tab using jQuery.

Step-1: include the jQuery link in the <head>..</head>tag on index.html file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Step-2: Create Html Code in the index.html file.

<body>
  <div class="pagetab">
    <div class="container">
      <p class="text">INFORMATION QUETIONS</p>
      <h4 class="text">STORE LOCATOR</h4>
      <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Ahemdabad Branch</li>
        <li class="tab-link" data-tab="tab-2">Surat Branch</li>
        <li class="tab-link" data-tab="tab-3">Jamnagar Branc</li>
        <li class="tab-link" data-tab="tab-4">Vadodara Branc</li>
        <li class="tab-link" data-tab="tab-5">Rajkot Branc</li>
      </ul>
      <div id="tab-6"class="tab-content"></div>
      <div id="tab-1" class="tab-content current">
        <div class="row">
          <div class="box">
            <div class="row">
              <div class="detail">
                <p>Store code : 105</p>
                <h5>LOREM IPSUM LOREM</h5>
                <P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
              </div>
            </div>
          </div>
          <div class="box">
            <div class="detail">
              <p>Store code : 105</p>
              <h5>LOREM IPSUM LOREM</h5>
              <P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
            </div>
          </div>
        </div>
      </div>
      <div id="tab-2" class="tab-content">
        <div class="row">
          <div class="box">
            <div class="detail">
              <p>Store code : 105</p>
              <h5>LOREM IPSUM LOREM</h5>
              <P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
            </div>
          </div>
          <div class="box">
            <div class="detail">
              <p>Store code : 105</p>
              <h5>LOREM IPSUM LOREM</h5>
              <P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="box">
            <div class="detail">
              <p>Store code : 105</p>
              <h5>LOREM IPSUM LOREM</h5>
              <P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
            </div>
          </div>
          <div class="box">
            <div class="detail">
              <p>Store code : 105</p>
              <h5>LOREM IPSUM LOREM</h5>
              <P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
            </div>
          </div>
        </div>
      </div>
      <div id="tab-3" class="tab-content">
        <div class="row">
          <div class="box">
            <div class="detail">
              <p>Store code : 105</p>
              <h5>LOREM IPSUM LOREM</h5>
              <P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
            </div>
          </div>
        </div>
      </div>
      <div id="tab-4" class="tab-content">
        <div class="row">
          <div class="box">
            <div class="detail">
              <p>Store code : 105</p>
              <h5>LOREM IPSUM LOREM</h5>
              <P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
            </div>
          </div>
          <div class="box boxsa">
            <div class="detail">
              <p>Store code : 105</p>
              <h5>LOREM IPSUM LOREM</h5>
              <P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
            </div>
          </div>
        </div>
      </div>
      <div id="tab-5" class="tab-content">
        <div class="row">
          <div class="box">
            <div class="row">
              <div class="detail">
                <p>Store code : 105</p>
                <h5>LOREM IPSUM LOREM</h5>
                <P>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </P>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Step-3: Add CSS in<style>….</style> tag on index.html file.

.container:after{
  content:"";
  display:block;
  clear:both;
}
body .container{
  width:100%;
  max-width:1000px;
  padding-left:15px;
  padding-right:15px;
  margin:0 auto;
  position:relative;
  float:none;
}
body .container .container{
  width:100%;
  max-width:100%;
  padding-left:0;
  padding-right:0;
}
ul.tabs{
  margin: 0px;
  padding: 0px;
  list-style: none;
  text-align: center;
}
ul.tabs li{
  background: none;
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
  border: 1px solid #f5f5f5;
  margin: 0;
}
ul.tabs li.current{
  color: #222;
  position: relative;
  border: 1px solid #bdbdbd;
}
.tab-content{
  visibility: hidden;
  padding: 15px;
}
.tab-content.current{
  visibility: visible;
  animation-name: example;
  animation-duration: 1s;
}
.text{
  text-align: center;
}
.box{
  border: 1px solid #ccc;
  width: 50%;
  height: auto;
  padding: 25px;
  margin-right: 15px;
  margin-bottom: 10px;
}
.row{
  display: flex;
  flex-wrap: wrap;

}
.tab-content .row{
  flex-wrap: nowrap;
}
.detail p{
  font-size:14px;
  color:#474747;
  margin: 0px 0px 5px;
}
.detail h5{
  margin: 0px 0px 5px;
}
.box .row{
  flex-wrap: nowrap;
}
.detail{
  padding: 0px 25px;
}
body p{
  margin-bottom: 5px;
}
@keyframes example {
  from {margin-top: 150px ;}
  to {margin-top: 0;}

}

Step-4: Add jQuery code in <script>…</script> tag on index.html.

I have added and removed class in li on tab click.

$(document).ready(function(){
    $('ul.tabs li').click(function(){
      var tab_id = $(this).attr('data-tab');

      $('ul.tabs li').removeClass('current');
      $('.tab-content').removeClass('current').addClass('test');

      $(this).addClass('current').removeClass('test');
      $("#"+tab_id).addClass('current').removeClass('test');
      $('.test').hide();
      $('.current').show();

    })	
  });

Review the below video.

I hope you guys found something useful  ??

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories