Horizontal Tab
Tab 1
Your Tab 1 content.....!
Tab 2
Your Tab 2 content.....!
Tab 3
Your Tab 3 content.....!
Structure
<div class="tabs">
<div class="tablinks">
<button class="tablink active" data-tab="t1">Tab 1</button>
<button class="tablink" data-tab="t2">Tab 2</button>
<button class="tablink" data-tab="t3">Tab 3</button>
</div>
<div id="t1" class="tabcontent active">
<h1>Tab 1</h1>
<p>Your Tab 1 content.....!</p>
</div>
<div id="t2" class="tabcontent">
<h1>Tab 2</h1>
<p>Your Tab 2 content.....!</p>
</div>
<div id="t3" class="tabcontent">
<h1>Tab 3</h1>
<p>Your Tab 3 content.....!</p>
</div>
</div>
Style
<style>
*{box-sizing:border-box;}
.tabs {
width:100%; /*set the width of the tabs */
box-shadow:0 1px 4px rgba(0,0,0,0.4);
}
div.tablinks {
overflow: hidden;
background-color: #f1f1f1;
}
button.tablink {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
width:33.33%;
}
.tablink:hover {
background-color: #f8bbd0;
}
.tablink.active {
background-color: #f48fb1;
color: white;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #e0e0e0;
height:250px;
overflow:auto;
}
.tabcontent.active{
display: block;
}
</style>
Process
<script src="jquery.min.js"></script>
<script>
$(".tablink").click(function(){
$(".tabcontent.active,.tablink.active").removeClass("active");
$("#"+$(this).attr("data-tab")).add(this).addClass("active");
});
</script>