Hello guys in this tutorial we will create advance testimonial tabbing using HTML CSS and jQuery
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Advance Testimonial Tabbing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="testimonial-tabbing-outer">
<div class="container">
<div class="row grid-a-250">
<div class="colmun left-col">
<div class="tabs-content">
<div id="tab1" class="current">
<h2>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."</h2>
<div class="user-info">
<h4>RAHUL JANGID</h4>
<small>Where does it come from?</small>
</div>
</div>
<div id="tab2">
<h2>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley."</h2>
<div class="user-info">
<h4>RAHUL JANGID</h4>
<small>Where does it come from?</small>
</div>
</div>
<div id="tab3">
<h2>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled."</h2>
<div class="user-info">
<h4>RAHUL JANGID</h4>
<small>Where does it come from?</small>
</div>
</div>
<div id="tab4">
<h2>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s."</h2>
<div class="user-info">
<h4>RAHUL JANGID</h4>
<small>Where does it come from?</small>
</div>
</div>
<div id="tab5">
<h2>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."</h2>
<div class="user-info">
<h4>RAHUL JANGID</h4>
<small>Where does it come from?</small>
</div>
</div>
<div id="tab6">
<h2>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley."</h2>
<div class="user-info">
<h4>RAHUL JANGID</h4>
<small>Where does it come from?</small>
</div>
</div>
<div id="tab7">
<h2>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley."</h2>
<div class="user-info">
<h4>RAHUL JANGID</h4>
<small>Where does it come from?</small>
</div>
</div>
<div id="tab8">
<h2>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."</h2>
<div class="user-info">
<h4>RAHUL JANGID</h4>
<small>Where does it come from?</small>
</div>
</div>
</div>
</div>
<div class="colmun right-col">
<div class="tab-nav-outer">
<ul class="tab-nav">
<li data-id="tab1" class="active"><img src="assets/img.jpg"></li>
<li data-id="tab2"><img src="assets/img.jpg"></li>
<li data-id="tab3"><img src="assets/img.jpg"></li>
<li data-id="tab4"><img src="assets/img.jpg"></li>
<li data-id="tab5"><img src="assets/img.jpg"></li>
<li data-id="tab6"><img src="assets/img.jpg"></li>
<li data-id="tab7"><img src="assets/img.jpg"></li>
<li data-id="tab8"><img src="assets/img.jpg"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".tab-nav li").click(function(){
var tab_id = $(this).attr("data-id");
$(".tab-nav li").removeClass("active");
$(".tabs-content > div").removeClass("current");
$(this).addClass("active");
$("#"+tab_id).addClass("current");
});
});
</script>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
.container {
width: 95%;
max-width: 1025px;
margin: auto;
}
.grid-a-250 {
display: grid;
grid-template-columns: auto 250px;
align-items: center;
}
.tab-nav > li img {
display: block;
width: 100%;
filter: grayscale(1);
}
ul.tab-nav {
list-style: none;
display: grid;
grid-template-columns: 50% 50%;
}
.tab-nav > li {
cursor: pointer;
position: relative;
}
.testimonial-tabbing-outer {
margin: 50px 0;
}
.tabs-content h2 {
font-size: 35px;
}
.user-info {
margin-top: 50px;
}
.tab-nav > li.active img {
filter: unset;
}
.tabs-content h2 {
font-size: 35px;
line-height: 55px;
}
.tabs-content > div {
display: none;
}
.tabs-content > div.current {
display: block;
}