I created a survey to assist individuals in determining where to go based on the type of ticket they have. However, I am currently facing difficulties with implementing a "Back" button that will display the previous screen or "ul" that the user saw. Initially, my plan was to remove the 'active' class from the current "ul", but that approach did not work. Can someone please guide me on how to implement the back button effectively?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="js.js"></script>
</head>
<body>
<section class="question_wrapper">
<ul class="tab active">
<li class="active">
<p>Do you possess a ticket?</p>
<a href="#tab1">yes</a>
<a href="#tab2">no</a>
</li>
</ul>
<ul class="tab" id="tab1">
<li>
<p>Which type of ticket do you have?</p>
<a href="#tab3">Type 1</a>
<a href="#tab3">Type 2</a>
<a href="#tab3">Type 3</a>
<a href="#tab4">Type 4</a>
<a href="#tab4">Type 5</a>
<a href="#tab5">Type 6</a>
<button type="button">Back</button>
</li>
</ul>
<ul class="tab" id="tab2">
<li>
<p>Purchase a ticket and come back later</p>
<button>Back</button>
</li>
</ul>
<ul class="tab" id="tab3">
<li>
<p>Proceed to Hall A</p>
<button>Back</button>
</li>
</ul>
<ul class="tab" id="tab4">
<li>
<p>Head to Hall B</p>
<button>Back</button>
</li>
</ul>
<ul class="tab" id="tab5">
<li>
<p>Make your way to Hall C</p>
<button>Back</button>
</li>
</ul>
</section>
</body>
</html>
CSS
.question_wrapper {
display: flex;
justify-content: center;
}
ul {
list-style: none;
border: 1px solid black;
text-align: center;
padding-left: 0;
width: 40rem;
height: 20rem;
display: flex;
justify-content: center;
align-items: center;
}
.tab {
display: none;
}
.tab.active {
display: flex;
}
JS/JQuery
$(document).ready(function(){
$(function() {
$(".tab a").click(function() {
$(this).parent().addClass("active").siblings(".active").removeClass("active");
var tabContents = $(this).attr("href");
$(tabContents).addClass("active").siblings(".active").removeClass("active");
return false;
});
});
$("button").on("click", function(){
$(this).parent().removeClass("active");
});
});