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 ??
