I have created some basic HTML/CSS tabs and I want to move to the next tab by clicking a link at the bottom of every tab.
HTML
<ul class="tabs">
<li class="active">
<a href="#">Explainer (2mins)</a>
<div class="content">
<div id="Video" class="tabcontent">
<div class="coltab">
content A
</div>
<h4>Next tab: View Some Sample Lessons</h4>
</div>
</div>
</div>
</li>
<li>
<a href="#">Sample Lessons</a>
<div class="content coltab">
<div>
Content B
</div>
<h4> Next tab: See the Your Offer. </h4>
</div>
</li>
</ul>
Jquery for this is
$(document).ready(function(){
$(".tabs").after("<div class='tabContent'></div>");
$(".tabs li>a").on("click", function(e){
var $tab = $(this).parent();
var tabIndex = $tab.index();
$tab.parent("ul").find("li").removeClass("active");
$tab.addClass("active");
var tabContent = $tab.find(">div").clone(true);
$(".tabContent").html(tabContent);
e.preventDefault();
});
});
The functionality works as intended - clicking on a tab changes it.
Live demo
$(document).ready(function(){
$(".tabs").after("<div class='tabContent'></div>");
$(".tabs li>a").on("click", function(e){
var $tab = $(this).parent();
var tabIndex = $tab.index();
$tab.parent("ul").find("li").removeClass("active");
$tab.addClass("active");
var tabContent = $tab.find(">div").clone(true);
$(".tabContent").html(tabContent);
e.preventDefault();
});
});.coltab{
height: 51vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tabs {
margin: 0;
padding: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
overflow: hidden;
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.tabs li {
display: table-cell;
margin: 0;
padding: 0;
list-style: none;
border-right: 1px solid #000;
}
.tabs li>a {
display: block;
font-weight: bold;
text-align: center;
padding: 5px;
}
.tabs li>a:hover,.tabs li.active a {
background-color: #D3D3D3;
}
.tabs li .content {
display: none;
}
.tabContent {
padding: 15px 15px 0px 15px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
<li class="active">
[...]
<h4>Back to first tab</h4>
</div>
</div>
</div>
</li>
</ul>