Back button to show previous ul with jquery - javascript

I made a questionnaire to help people where should they go when they have a certain type of ticket. Right now I'm having trouble with make the "Back" button to show the previous "ul" or screen that the user seen. At first I'm going to remove the 'active' class of the current "ul" but it won't work. Could show me how to make the back button ?
Thanks
HTML
<!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 have a ticket ?</p>
yes
no
</li>
</ul>
<ul class="tab" id="tab1">
<li>
<p>Which Ticket do you have ?</p>
Type 1
Type 2
Type 3
Type 4
Type 5
Type 6
<button type="button">Back</button>
</li>
</ul>
<ul class="tab" id="tab2">
<li>
<p>Go buy some ticket then</p>
<button>Back</button>
</li>
</ul>
<ul class="tab" id="tab3">
<li>
<p>Please go to hall A</p>
<button>Back</button>
</li>
</ul>
<ul class="tab" id="tab4">
<li>
<p>Please go to hall B</p>
<button>Back</button>
</li>
</ul>
<ul class="tab" id="tab4">
<li>
<p>Please go 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");
});
});

I have made a few changes to the button click.
$(':button') to $('button')
On click, remove active classname from all ul except the first ul
There is a mistake I found in your code that I found, which is you are using only one li in each ul, but for each items under ul, you should be using a li and if you need more elements, you can use them.
Update
Updated the snippet with the functionality to go back to previous ul instead of the first one.
I am keeping an additional attribute with each ul to identify the level they are in, so when I click on the back button, I am identifying the currentLevel and finding the next one using the currentLevel.
$(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(){
let currentLevel = $(this).closest('.tab').attr('data-level');
let prevLevel = parseInt(currentLevel) - 1;
$('.tab').removeClass("active");
$('.tab').each(function(index, item) {
if(parseInt($(item).attr('data-level')) === prevLevel) {
$(item).addClass('active');
}
})
});
});
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="question_wrapper">
<ul class="tab main-tab active" data-level='1'>
<li class="active">
<p>Do you have a ticket ?</p>
yes
no
</li>
</ul>
<ul class="tab" data-level='2' id="tab1">
<li>
<p>Which Ticket do you have ?</p>
Type 1
Type 2
Type 3
Type 4
Type 5
Type 6
<button type="button">Back</button>
</li>
</ul>
<ul class="tab" id="tab2" data-level='3'>
<li>
<p>Go buy some ticket then</p>
<button>Back</button>
</li>
</ul>
<ul class="tab" id="tab3" data-level='3'>
<li>
<p>Please go to hall A</p>
<button>Back</button>
</li>
</ul>
<ul class="tab" id="tab4" data-level='3'>
<li>
<p>Please go to hall B</p>
<button>Back</button>
</li>
</ul>
<ul class="tab" id="tab5" data-level='3'>
<li>
<p>Please go to hall C</p>
<button>Back</button>
</li>
</ul>
</section>

Related

List with toggle div show/hide

The idea is that the user can either download the file by clicking download or view it as a png in browser by clicking open/show/whatever.
I used a solution found on here to achieve a show/hide toggle div function. It worked perfectly for one list item, but I'm trying to find a way to use this with a list of about 30 entries. I know I could just copy and paste the code and make new classes for the divs and anchors but surely there's a better way. I'm new to web development so I apologise if the solution is an obvious one.
Here is an example. I want each entry to control it's own div toggle (click on open).
$('.list-link').click(function() {
$('.test-div').show(500);
$('.list-link').hide(0);
$('.Hide').show(0);
});
$('.Hide').click(function() {
$('.test-div').hide(500);
$('.list-link').show(0);
$('.Hide').hide(0);
});
.list-entry {
background-color: darkgrey;
width: 200px;
margin-bottom: 10px;
list-style: none;
}
.test-div {
width: 200px;
height: 100px;
background-color: blue;
display: none;
}
.Hide {
display: none;
}
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<ul class="list">
<li class="list-entry">
<p> test 1</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</li>
<div class="test-div"></div>
<li class="list-entry">
<p> test 2</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
</li>
<div class="test-div"></div>
<li class="list-entry">
<p> test 3</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
</li>
<div class="test-div"></div>
</ul>
https://codepen.io/pen/RwgaxRQ
Thanks in advance.
To do what you require you can use jQuery's DOM traversal methods, such as closest() and find(), to relate the element that raised the click event to those around it which you want to affect.
Also note that your HTML is invalid. ul can only contain li elements, not div, so you need to change the structure slightly.
With that said, try this:
$('.list-link').click(function() {
let $li = $(this).closest('li');
$li.find('.test-div').show(500);
$li.find('.list-link').hide();
$li.find('.Hide').show();
});
$('.Hide').click(function() {
let $li = $(this).closest('li');
$li.find('.test-div').hide(500);
$li.find('.list-link').show();
$li.find('.Hide').hide();
});
.list-entry {
background-color: darkgrey;
width: 200px;
margin-bottom: 10px;
list-style: none;
}
.test-div {
width: 200px;
height: 100px;
background-color: blue;
display: none;
}
.Hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="list">
<li class="list-entry">
<p> test 1</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
<li class="list-entry">
<p> test 2</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
<li class="list-entry">
<p> test 3</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
</ul>
Also note that I updated the demo to use jQuery v3.6.0, as 2.1.4 is very outdated.

toggling a list using jquery

I am trying to create a toggle list using html and jquery means on clicking button i want a drop-down list
my html code snippet is
<div class="container">
<div class="card text-center" style="width: 14 rem;">
<div class="card-body">
<button class="btn btn-danger btn-sm">
hello
</button>
<div class="show">
<ul class="list">
<li class="e">Home</li>
<li class="e">About</li>
<li class="e">Contact Us</li>
<li class="e">Log Out</li>
</ul>
</div>
</div>
</div>
</div>
and my css styling for the same is
.list{
display: none;
}
.e{
list-style: none;
}
.info{
display: block;
}
i am having little confusion in the jquery part which looks like this
$(document).ready(function(){
$('.card-body').on('click','button',function(){
$('.list li').toggleClass('list');
});
});
any help would be appreciated.
If you want to toogle your .list you can do it like this:
$(document).ready(function() {
$('.card-body').on('click', 'button', function() {
$('.list').toggleClass('info');
});
});
Note you can also do it like $('.list').toggle()
$(document).ready(function() {
$('.card-body').on('click', 'button', function() {
$('.list').toggleClass('info');
});
});
.list {
display: none;
}
.e {
list-style: none;
}
.info {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card text-center" style="width: 14 rem;">
<div class="card-body">
<button class="btn btn-danger btn-sm">
hello
</button>
<div class="show">
<ul class="list">
<li class="e">Home</li>
<li class="e">About</li>
<li class="e">Contact Us</li>
<li class="e">Log Out</li>
</ul>
</div>
</div>
</div>

How to push lower row items of a flex box further down to create space for addtional content upon click?

I created an HTML flex-box that displays images based on data returned from API which is somewhat like this:-
[![THIS][1]][1]
Now I want to display additional data upon clicking on a specific div element.So that the lower divs move further down and create space for "expand" section
[![Say like space for tiffin is produced in here][2]][2]
Why not insert a placeholder flex row below each specific flex data row?
I created an demo where you can run this snippet and click each row to figure out if it works for you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.flex-box {
width: 800px;
display: flex;
flex-direction: column;
}
.flex-box__nav {
display: flex;
}
.flex-box__item {
flex: 1;
border: 1px solid black;
}
.flex-box__collapse {
display: none;
background: red;
}
</style>
<div class="flex-box">
<ul class="flex-box__nav">
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
</ul>
<div class="flex-box__collapse">
collapsed area
</div>
<ul class="flex-box__nav">
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
</ul>
<div class="flex-box__collapse">
collapsed area
</div>
</div>
<script>
function clickHanlder() {
var isCollapse = true;
return function () {
this.nextSibling.nextSibling.style.display = isCollapse ? "block" : "none";
isCollapse = !isCollapse;
}
}
document.querySelectorAll(".flex-box__nav").forEach(function (val) {
val.onclick = clickHanlder();
});
</script>
</body>
</html>

Two buttons showing two different div

I have a problem with my jQuery code. I would like to click on one of the previewed text that belongs to that button and the other was eventually closed.
The text should go down using slideDown() and disappear using slideUp(). How it could adjust to it did not make a mess?
HTML:
<div class="ata-pdf-wrapper ata-btn-video">
<a title="Videos">
<span>Videos</span>
<span> </span>
</a>
</div>
<div class="ata-pdf-wrapper ata-btn-pdf">
<a title="Download PDF">
<span>Download</span>
<span> </span>
</a>
</div>
<br/>
<br/>
<div class="ata-media-wrapper">
<div class="ata-downloads">
<ul>
<li>
<a title="DQA (free)" href="http://www.ataccama.com/en/products/dq-analyzer/download.html">DQA (free)</a>
</li>
<li>
<a title="Product Sheet" href="http://www.ataccama.com/dq-analyzer-product-sheet">Product Sheet</a>
</li>
<li>
<a title="User Guide" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/Ataccama%20DQA%209%20User%20Guide.pdf">User Guide</a>
</li>
<li>
<a title="Frequently Asked Questions" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/DQA%209%20FAQ.pdf">Frequently Asked Questions</a>
</li>
</ul>
</div>
<div class="ata-videos">
<ul>
<li>
<a title="Creating a Profile" href="https://www.youtube.com/watch?v=WC_VZ5z5q3E">Creating a Profile</a>
</li>
<li>
<a title="Understanding Profiling Results" href="https://www.youtube.com/watch?v=2L35k080ovQ">Understanding Profiling Results</a>
</li>
<li>
<a title="Advanced Profiling" href="https://www.youtube.com/watch?v=nQGBYkTXNPc">Advanced Profiling</a>
</li>
<li>
<a title="Email Analysis" href="https://www.youtube.com/watch?v=u45G0yo9sE4">Email Analysis</a>
</li>
</ul>
</div>
</div>
jQuery:
$(document).ready(function() {
$(".ata-pdf-wrapper.ata-btn-video").click(function(){
if ($(".ata-pdf-wrapper.ata-btn-video").hasClass("active")) {
$(".ata-media-wrapper").hide();
$(".ata-videos").fadeIn(500);
$(".entry-content").removeClass("shadow");
$(".ata-pdf-wrapper.ata-btn-video").removeClass("active");
} else{
$(".ata-pdf-wrapper.ata-btn-video").addClass("active");
$(".ata-media-wrapper").show();
$(".ata-videos").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
$(".ata-pdf-wrapper.ata-btn-pdf").click(function(){
if ($(".ata-pdf-wrapper.ata-btn-pdf").hasClass("active")) {
$(".ata-media-wrapper").hide();
$(".ata-downloads").fadeIn(500);
$(".entry-content").removeClass("shadow");
$(".ata-pdf-wrapper.ata-btn-pdf").removeClass("active");
} else{
$(".ata-pdf-wrapper.ata-btn-pdf").addClass("active");
$(".ata-media-wrapper").show();
$(".ata-downloads").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
});
The code is on jsFiddle.
If y understand what you want to do with those lists, something not messy is the following example.
$(document).ready(function() {
$(".ata-pdf-wrapper.ata-btn-video").click(function(ev){
var $currentTarget = $(ev.currentTarget);
if ($currentTarget.hasClass("active")) {
$(".ata-videos").slideUp(500);
$(".entry-content").removeClass("shadow");
$currentTarget.removeClass("active");
} else{
$currentTarget.addClass("active");
$(".ata-videos").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
$(".ata-pdf-wrapper.ata-btn-pdf").click(function(ev){
var $currentTarget = $(ev.currentTarget);
if ($currentTarget.hasClass("active")) {
$(".ata-downloads").slideUp(500);
$(".entry-content").removeClass("shadow");
$currentTarget.removeClass("active");
} else{
$currentTarget.addClass("active");
$(".ata-downloads").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
});
.ata-pdf-wrapper a {
display: inline-block;
background: #55d239;
border-radius: 20px;
text-align: center;
border: 2px solid #fff;
cursor: pointer;
}
.ata-pdf-wrapper a > span {
float: left;
padding: 6px 20px 5px 25px;
color: #fff;
}
.ata-pdf-wrapper.ata-btn-video a > span + span,
.ata-pdf-wrapper.ata-btn-pdf a > span + span,
.ata-pdf-wrapper a > span + span {
float: right;
width: 11px;
height: 18px;
padding: 10px 10px 10px 18px;
border-left: 1px solid #45bd2a;
}
.ata-pdf-wrapper a:hover,
.ata-pdf-wrapper.active a {
border: 2px solid #309319;
}
.ata-pdf-wrapper.ata-btn-video {
right: 200px;
}
.ata-downloads,
.ata-videos {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="ata-pdf-wrapper ata-btn-video">
<a title="Videos">
<span>Videos</span>
<span> </span>
</a>
</div>
<div class="ata-videos">
<ul>
<li>
<a title="Creating a Profile" href="https://www.youtube.com/watch?v=WC_VZ5z5q3E">Creating a Profile</a>
</li>
<li>
<a title="Understanding Profiling Results" href="https://www.youtube.com/watch?v=2L35k080ovQ">Understanding Profiling Results</a>
</li>
<li>
<a title="Advanced Profiling" href="https://www.youtube.com/watch?v=nQGBYkTXNPc">Advanced Profiling</a>
</li>
<li>
<a title="Email Analysis" href="https://www.youtube.com/watch?v=u45G0yo9sE4">Email Analysis</a>
</li>
</ul>
</div>
<div class="ata-pdf-wrapper ata-btn-pdf">
<a title="Download PDF">
<span>Download</span>
<span> </span>
</a>
</div>
<div class="ata-downloads">
<ul>
<li>
<a title="DQA (free)" href="http://www.ataccama.com/en/products/dq-analyzer/download.html">DQA (free)</a>
</li>
<li>
<a title="Product Sheet" href="http://www.ataccama.com/dq-analyzer-product-sheet">Product Sheet</a>
</li>
<li>
<a title="User Guide" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/Ataccama%20DQA%209%20User%20Guide.pdf">User Guide</a>
</li>
<li>
<a title="Frequently Asked Questions" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/DQA%209%20FAQ.pdf">Frequently Asked Questions</a>
</li>
</ul>
</div>
<br/> <br/>

jQuery - Search results View - List & Grid

I am fairly new to jQuery and I am making a results page where the user can switch between list and grid view. It does seem to work but when I have a lot of results it seems to be buggy. Can anyone see why this may be?
CODEPEN DEMO
Any help would be much appreciated.
JS
$('.btn.grid').click(function() {
if (!$(this).hasClass("active")) {
$(this).addClass("active");
$('.results-wrapper .grid_12').removeClass("grid_12").addClass("grid_3");
$('.wrapper .results').addClass("grid-view-active");
if ($(".btn.list").hasClass("active")) {
$(".btn.list").removeClass("active");
$('.wrapper .results').removeClass("list-view-active");
}
}
});
$('.btn.list').click(function() {
if (!$(this).hasClass("active")) {
$(this).addClass("active");
$('.results-wrapper .grid_3').removeClass("grid_3").addClass("grid_12");
$('.wrapper .results').addClass("list-view-active");
if ($(".btn.grid").hasClass("active")) {
$(".btn.grid").removeClass("active");
$('.wrapper .results').removeClass("grid-view-active");
}
}
});
HTML
<span class="btn grid active">grid</span>
<span class="btn list">list</span>
<div class="wrapper">
<div class="results-wrapper">
<ul class="results">
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
</ul>
</div>
</div>
CSS
.btn {
background: #ccc;
cursor: pointer;
display: inline-block;
height: 35px;
width: 35px;
}
.btn.active {
background: red;
}
li {
float: left;
height: 200px;
width: 200px;
}
li img {
max-width: 100%;
max-height: 100%;
}
.grid_3 {
width: 25%;
}
.grid_12 {
width: 100%;
}
var gridButton = $('.btn.grid');
var listButton = $('.btn.list');
var isGridActive = true;
gridButton.click(function() {
if(!isGridActive) {
toggleFunction();
}
});
listButton.click(function() {
if(isGridActive) {
toggleFunction();
}
});
var toggleFunction = function(){
listButton.toggleClass("active");
gridButton.toggleClass("active");
if(isGridActive) {
$('.results-wrapper .grid_3').removeClass("grid_3").addClass("grid_12");
$('.wrapper .results').addClass("list-view-active").removeClass("grid-view-active");
} else {
$('.results-wrapper .grid_12').removeClass("grid_12").addClass("grid_3");
$('.wrapper .results').addClass("grid-view-active").removeClass("list-view-active");
}
isGridActive = !isGridActive;
};
If anyone can make that if statement any better that would be excellent.

Categories