Here is another example and tutorial how we can do a show and hide previous and next HTML5 divs/tabs based on it’s id’s and classes…
The idea is simple, we must store a value of a number of current tab that we are seeing right now in a variable, then by clicking next button we show the next tab with that value+1, and if we click previous button we show the tab with that stored value-1, also with hiding the rest unnecessary tabs.
Check out thsi code:
<!DOCTYPE html>
<html>
<head>
<title>Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.tabcontent { display: none;}
.tabcontent .active{display: block; display: show ;}
</style>
</head>
<body>
<div class="container text-center">
<h1>Tabs with buttons</h1>
<button class="float-left btn bg-primary" onclick="prev()">Previous </button>
<button class="btn btn-primary float-right" onclick="next()">Next</button>
<nav class="multiTabs">
<a class="btn btn-danger mr-2" href="javascript:void(0)" data-trigger='content1'>Tab1</a>
<a class="btn btn-danger mr-2" href="javascript:void(0)" data-trigger='content2'>Tab2</a>
<a class="btn btn-danger mr-2" href="javascript:void(0)" data-trigger='content3'>Tab3</a>
<a class="btn btn-danger mr-2" href="javascript:void(0)" data-trigger='content4'>Tab4</a>
<a class="btn btn-danger mr-2" href="javascript:void(0)" data-trigger='content5'>Tab5</a>
</nav>
<!-- content -->
<div class="tabcontent active bg-light" id="content1">
<h1>Tab1</h1>
<p>This is some text about tab1</p>
</div>
<div class="tabcontent bg-light" id="content2">
<h1>Tab2</h1>
<p>This is some text about tab2</p>
</div>
<div class="tabcontent bg-light" id="content3">
<h1>Tab3</h1>
<p>This is some text about tab3</p>
</div>
<div class="tabcontent bg-light" id="content4">
<h1>Tab4</h1>
<p>This is some text about tab4</p>
</div>
<div class="tabcontent bg-light" id="content5">
<h1>Tab5</h1>
<p>This is some text about tab5</p>
</div>
</div>
<script>
var currentTab = 1;
$("#contetn1").show();
$(document).on('click', 'nav.multiTabs>a',
function(){
var TabId = $(this).attr('data-trigger');
$('div#'+TabId+' ').show();
console.log("Current Tab: " + TabId);
currentTab = parseInt(TabId.replace("content", ""));
$('.tabcontent:not(#'+TabId+')').hide()
});
function next(){
if(currentTab < 5){
$(".tabcontent").hide();
currentTab++;
$("#content"+(currentTab)).show();
}
}
function prev(){
if(currentTab > 1){
$(".tabcontent").hide();
currentTab--;
$("#content" + (currentTab)).show();
}
}
</script>
</body>
</html>
To see the details please watch this video and leave your comments 😀