Fade-out Left & Fade-in Right animation with jQuery

Fade-out Left & Fade-in Right animation with jQuery - javascript

This is a questionnaire to help people where should they go when they have a certain type of ticket.
Right now everything is going OK but I need to put a smooth animation on each ul transition.
So, if you pressed any button, the old ul is gonna fade-out to the left and the new ul will fade-in from the right. But if you press the Back button it will do the opposite animation when going back to the previous ul.
Right now I'm only using animation from https://animate.style/. Is there anyway to control the animation with jQuery or is it better to build the animation with jQuery alone ?
$(document).ready(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;
setTimeout(function() {
q_list.eq(num).addClass("left");
setTimeout(function() {
q_list.eq(num).hide();
q_list.eq(num + 1).show();
btn.removeClass("click");
setTimeout(function() {
q_list.eq(num + 1).removeClass("right");
num++
}, 1000);
}, 360);
}, 260);
});
$("button").on("click", function() {
let currentLevel = $(this).closest('.tab').attr('data-level');
let prevLevel = parseInt(currentLevel) - 1;
$('.tab').removeClass("active");
$(`.tab[data-level=${prevLevel}]`).eq(0).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;
}
.buttons {
display: flex;
justify-content: space-around;
}
.yes_part,
.no_part {
display: flex;
flex-direction: column;
}
.yes_part {
padding-right: 2rem;
}
a.yes {
background-color: #FFB8B8;
padding: 5px 20px;
text-decoration: none;
color: black;
margin-top: 5px;
}
a.no {
background-color: #B1E0FF;
padding: 5px 20px;
text-decoration: none;
color: black;
margin-top: 5px;
}
.ticket_type {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-bottom: 10px;
}
.ticket_type a {
padding: 10px 30px;
border: 1px solid black;
border-radius: 10px;
margin: 10px;
}
.answer_1 {
display: flex;
flex-direction: column;
}
.store_place_1,
.store_place_2 {
display: flex;
}
.store_1,
.store_2,
.store_3,
.store_4,
.store_5 {
text-decoration: none;
color: black;
}
a {
text-decoration: none;
color: black;
}
.tab {
display: none;
}
.tab.active {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<section class="question_wrapper">
<ul class="tab main-tab active animate__animated animate__fadeInRight" data-level='1'>
<li class="active">
<p>Do you have a ticket ?</p>
<div class="buttons">
<div class="yes_part">
<img src="yes.png" alt="">
<a class="yes" href="#tab1">yes</a>
</div>
<div class="no_part">
<img src="no.png" alt="">
<a class="no" href="#tab2">no</a>
</div>
</div>
</li>
</ul>
<ul class="tab animate__animated animate__fadeInRight" id="tab1" data-level='2'>
<li>
<p>Which Ticket do you have ?</p>
<div class="ticket_type">
Type 1
Type 2
Type 3
Type 4
Type 5
Type 6
</div>
<button type="button">Back</button>
</li>
</ul>
<ul class="tab animate__animated animate__fadeInRight" id="tab2" data-level='2'>
<li>
<p>You can buy the ticket from here.</p>
<div class="store_place_1">
<a href="#">
<div class="store_1">
<p>Store 1</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
<a href="#">
<div class="store_2">
<p>Store 2</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
<a href="#">
<div class="store_3">
<p>Store 3</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
</div>
<div class="store_place_2">
<a href="#">
<div class="store_4">
<p>Store 4</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
<a href="#">
<div class="store_5">
<p>Store 5</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
</div>
<button>Back</button>
</li>
</ul>
<ul class="tab animate__animated animate__fadeInRight" id="tab3" data-level='3'>
<li>
<div class="answer_1">
<p>Please go to hall A</p>
<img src="receptionist.png" alt="">
<button>Back</button>
</div>
</li>
</ul>
<ul class="tab animate__animated animate__fadeInRight" id="tab4" data-level='3'>
<li>
<p>Please go to hall B</p>
<button>Back</button>
</li>
</ul>
<ul class="tab animate__animated animate__fadeInRight" id="tab5" data-level='3'>
<li>
<p>Please go to hall C</p>
<button>Back</button>
</li>
</ul>
</section>

Here is a working version using Animate.css, and it's configurable to have any set of { Current->in, Current->out, Next->in and Next->out } transitions by editing the trans Object. You can also set the speed fast or '' (default). The way it works is:
on page init, the default transitions are applied to all animated elements (default is the trans.nextIn class)
on page init, the speed configuration class is applied to all animated elements
on any 'forward' transition (a click) the current element is given the nextOut transition and a timeout is set. When the timeout is done, the target tab is given its 'active' + nextIn transition class
on any 'back' transition, the reverse happens.
The code is commented.
let trans = {
nextIn: 'animate__fadeInLeft',
nextOut: 'animate__fadeOutRight',
prevIn: 'animate__fadeInRight',
prevOut: 'animate__fadeOutLeft'
};
let transArr = Object.entries(trans).map(e => e[1]);
let aDelay, speed = 'fast' // fast or slow
$(document).ready(function() {
// first set up the animations based on our configuration stuff above
$('.animate__animated').addClass(trans.nextIn) // auto-apply the default IN transition
if (speed === 'fast') {
aDelay = 200;
$('.animate__animated').addClass('animate__faster')
} else aDelay = 300;
$(".tab a").click(function() {
$('.tab').removeClass(transArr); // remove all transition classes from tabs
$(`.tab.active`).addClass(trans.nextOut)
var tabContents = $(this).attr("href");
$(tabContents).removeClass(transArr)
setTimeout(() => { // the timeout allows our departing containers a moment to get out before we bring in the next active container
$(`.tab.active`).removeClass('active')
$(tabContents).addClass([trans.nextIn, "active"])
}, aDelay)
});
$("button").on("click", function() {
let currentLevel = $(this).closest('.tab').attr('data-level');
let prevLevel = parseInt(currentLevel) - 1;
$('.tab').removeClass(transArr); // remove all transition classes from tabs
$(`.tab.active`).addClass(trans.prevOut);
setTimeout(() => { // the timeout allows our departing containers a moment to get out before we bring in the next active container
$('.tab').removeClass('active')
let targTab = `.tab[data-level=${prevLevel}]`;
$(targTab).eq(0).addClass('active ' + trans.prevIn);
}, aDelay)
});
});
.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;
}
.buttons {
display: flex;
justify-content: space-around;
}
.yes_part,
.no_part {
display: flex;
flex-direction: column;
}
.yes_part {
padding-right: 2rem;
}
a.yes {
background-color: #FFB8B8;
padding: 5px 20px;
text-decoration: none;
color: black;
margin-top: 5px;
}
a.no {
background-color: #B1E0FF;
padding: 5px 20px;
text-decoration: none;
color: black;
margin-top: 5px;
}
.ticket_type {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-bottom: 10px;
}
.ticket_type a {
padding: 10px 30px;
border: 1px solid black;
border-radius: 10px;
margin: 10px;
}
.answer_1 {
display: flex;
flex-direction: column;
}
.store_place_1,
.store_place_2 {
display: flex;
}
.store_1,
.store_2,
.store_3,
.store_4,
.store_5 {
text-decoration: none;
color: black;
}
a {
text-decoration: none;
color: black;
}
.tab {
display: none;
}
.tab.active {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<section class="question_wrapper">
<ul class="tab main-tab active animate__animated " data-level='1'>
<li class="active">
<p>Do you have a ticket ?</p>
<div class="buttons">
<div class="yes_part">
<img src="yes.png" alt="">
<a class="yes" href="#tab1">yes</a>
</div>
<div class="no_part">
<img src="no.png" alt="">
<a class="no" href="#tab2">no</a>
</div>
</div>
</li>
</ul>
<ul class="tab animate__animated " id="tab1" data-level='2'>
<li>
<p>Which Ticket do you have ?</p>
<div class="ticket_type">
Type 1
Type 2
Type 3
Type 4
Type 5
Type 6
</div>
<button type="button">Back</button>
</li>
</ul>
<ul class="tab animate__animated " id="tab2" data-level='2'>
<li>
<p>You can buy the ticket from here.</p>
<div class="store_place_1">
<a href="#">
<div class="store_1">
<p>Store 1</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
<a href="#">
<div class="store_2">
<p>Store 2</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
<a href="#">
<div class="store_3">
<p>Store 3</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
</div>
<div class="store_place_2">
<a href="#">
<div class="store_4">
<p>Store 4</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
<a href="#">
<div class="store_5">
<p>Store 5</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
</div>
<button data-back>Back</button>
</li>
</ul>
<ul class="tab animate__animated " id="tab3" data-level='3'>
<li>
<div class="answer_1">
<p>Please go to hall A</p>
<img src="receptionist.png" alt="">
<button data-back>Back</button>
</div>
</li>
</ul>
<ul class="tab animate__animated " id="tab4" data-level='3'>
<li>
<p>Please go to hall B</p>
<button data-back>Back</button>
</li>
</ul>
<ul class="tab animate__animated " id="tab5" data-level='3'>
<li>
<p>Please go to hall C</p>
<button data-back>Back</button>
</li>
</ul>
</section>

Related

How to adjust the height for images with different heights [duplicate]

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed last year.
I want to put my photos according to the following plan:
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul > li {
width: 49%;
}
ul > li img {
width: 100%;
margin-block-end: 0.25rem;
}
<ul>
<li>
<img src="img/study-image-1.png" alt="">
</li>
<li>
<img src="img/study-img-3.png" alt="">
</li>
<li>
<img src="img/study-img-2.png" alt="">
</li>
<li>
<img src="img/study-img-4.png" alt="">
</li>
</ul>
But when I did my design based on the following code, it was like this.
Thank you in advance for your cooperation

Do you want something like this?, you don´t need javascript
https://codepen.io/marcosefrem/pen/KKXELPy
<ul>
<li>
<img src="https://picsum.photos/500/400" alt="">
</li>
<li>
<img src="https://picsum.photos/100/50" alt="">
</li>
<li>
<img src="https://picsum.photos/200/200" alt="">
</li>
<li>
<img src="https://picsum.photos/100/400" alt="">
</li>
<li>
<img src="https://picsum.photos/500/400" alt="">
</li>
<li>
<img src="https://picsum.photos/100/50" alt="">
</li>
<li>
<img src="https://picsum.photos/200/200" alt="">
</li>
<li>
<img src="https://picsum.photos/100/400" alt="">
</li>
</ul>
<style>
ul {
column-count: 3;
column-gap: 1.25rem;
}
li {
break-inside: avoid-column;
position: relative;
display: inline-block;
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
li img {width:100%; object-fit:cover}
</style>

For this fairly straightforward layout where it must be known that the aspect ratios of the two bigger images are the same as are the aspect ratios of the two smaller images you could use CSS two columns:
ul {
columns: 2;
width: 50vw;
font-size: 4px;
}
li img {
width: 100%;
height: auto;
margin: 2px 0 2px 0;
}
<ul>
<li><img src="https://picsum.photos/id/1016/100/50"></li>
<li><img src="https://picsum.photos/id/1015/200/300"></li>
<li><img src="https://picsum.photos/id/1016/200/300"></li>
<li><img src="https://picsum.photos/id/1015/100/50"></li>
</ul>
Note - the vertical gap depends on font-size, hence the 4px to match the 2x2px of the margins. Obviously you will want to adjust this and the width of the whole thing to suit your particular needs.

Also can use from divs instead ul and li:
.container {
width: 300px;
grid-template-rows: 100px 100px 100px;
display: grid;
grid-template-areas: 'one tow' 'tree tow' 'tree four';
grid-gap: 10px;
}
img {
width: 100%;
height: 100%;
margin-block-end: 0.25rem;
}
.item1 {
grid-area: one;
}
.item2 {
grid-area: tow;
}
.item3 {
grid-area: tree;
}
.item4 {
grid-area: four;
}
<div class="container">
<div class="item1">
<img src="https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg" alt="">
</div>
<div class="item2">
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="">
</div>
<div class="item3">
<img src="https://s4.uupload.ir/files/717195_346_g0du.jpg" alt="">
</div>
<div class="item4">
<img src="https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg" alt="">
</div>
</div>

Add active class to menu li on scrolling through section in div

In the below set of code basd on selecting the .help-menu elements on left .help-descr div navigated to particular section .
Similarly on scrolling the .help-descr div I want to add active class selection to appropriate .help-menu elements
This what I have tried:
Its something similar to the attached link Add Menu Active Class when scrolling to div I am not able to replicate same approach here
help.js
// on load of page
$(function() {
$('.backend-feature li :first').addClass('active');
$('.backend-head').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Backend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $('.backend-feature li :first').text() + '</span');
});
//on click of backend feature menu
$(".backend-feature-li").on('click', function() {
$('.frontend-head').removeClass('active');
$('.frontother-head').removeClass('active');
$('.frontend-feature li').find('a').removeClass('active');
$('.front-otherfeature-li').find('a').removeClass('active');
$(this).siblings().find('a').removeClass('active');
$('.backend-head').addClass('active');
$(this).find('a').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Backend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});
// on click of frontend feature menu
$(".frontend-feature-li").on('click', function() {
$('.backend-head').removeClass('active');
$('.frontother-head').removeClass('active');
$('.backend-feature li').find('a').removeClass('active');
$('.front-otherfeature-li').find('a').removeClass('active');
$(this).siblings().find('a').removeClass('active');
$('.frontend-head').addClass('active');
$(this).find('a').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Frontend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});
//on click of frontend other features menu
$(".front-otherfeature-li").on('click', function() {
$('.backend-head').removeClass('active');
$('.backend-feature li').find('a').removeClass('active');
$('.frontend-feature-li').find('a').removeClass('active');
$(this).siblings().find('a').removeClass('active');
$('.frontend-head').addClass('active');
$('.frontother-head').addClass('active');
$(this).find('a').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Frontend</span><i class="ion-android-arrow-dropright"></i><span>Other Features</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});
.ion-help-circled {
cursor: pointer;
}
.help-row {
flex-wrap: nowrap;
max-width: 100%;
}
.help-menu {
background-color: #efefef;
overflow: auto;
padding: 15px;
height: 85vh;
}
.help-descr {
position: relative;
background-color: white;
padding: 25px 25px;
overflow: auto;
height: calc(100vh - 107px);
border: 1px solid #efefef;
}
.help-menu ul .front-otherfeature-li {
margin-left: 18px;
}
.help-menu ul li {
list-style-type: none;
margin: 8px;
}
.help-menu ul .backend-head,
.help-menu ul .frontend-head {
margin-left: 0px;
}
.backend-feature li a,
.frontend-feature li a,
.frontend-otherfeature li a {
padding: 0;
text-decoration: none;
color: black;
}
.help-menu li .active {
font-weight: bold;
}
.help-menu a:hover {
font-weight: bold;
}
.main-section {
background-color: white;
}
section {
display: flex;
flex-direction: column;
padding-bottom: 15px;
}
article {
display: flex;
flex-direction: column;
padding-left: 30px;
}
.main-section ul>li {
margin-top: 6px;
}
.main-section p {
margin-bottom: 0px;
}
.backend-feature-arrow,
.frontend-feature-arrow,
.other-feature-arrow {
margin-right: 6px;
cursor: pointer;
}
.selected-item span {
padding: 6px;
}
.descr-seclevel {
list-style-type: square;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'">
<link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/style.css">
<link src="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" src_type="url" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="./vendors/css/ionicons.min.css">
<script defer src="./js/help_page.js"></script>
<title>Revive</title>
</head>
<body>
<div id="header">
<div class="dashboard-header">
<div class="dashboard-left-header">
<ul style="margin-bottom: 0px;">
<li>
<a style="cursor: default;" class="logo" href=""><img src="./assets/img/img1.png"></img>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row help-row">
<div class="col-sm-3 help-menu">
<ul>
<li style="font-weight: bold;">Supported Features</li>
<li>
<ul>
<li class='backend-head'><i class="backend-feature-arrow ion-ios-arrow-down" style="font-size:18px ;display:inline-block"></i>Backend</li>
<li>
<ul class="backend-feature">
<li class="backend-feature-li">Datasources</li>
<li class="backend-feature-li">Joins</li>
</ul>
</li>
<li class='frontend-head'><i class="frontend-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Frontend</li>
<li>
<ul class="frontend-feature">
<li class="frontend-feature-li">Properties</li>
<li class="frontother-head"><i class="other-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Other Features</li>
<li>
<ul class="frontend-otherfeature">
<li class="front-otherfeature-li">Actions</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-sm-9 help-descr">
<div class='selected-item'></div>
<section class="main-section" id="datasource">
<header>
<h1>Datasources</h1>
</header>
<article>
<p>The supported Datasources:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Excel</li>
<li>Csv</li>
<li>Oracle Database</li>
<li>MSSQL server</li>
<li>PostgreSQL</li>
<li>MySQL</li>
</ul>
</article>
</section>
<section class="main-section" id="joins">
<header>
<h1>Joins</h1>
</header>
<article>
<p>The supported Joins:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Inner Join</li>
<li>Left Join</li>
<li>Right Join</li>
<li>Full Outer Join</li>
</ul>
</article>
</section>
<section class="main-section" id="properties">
<header>
<h1>Properties</h1>
</header>
<article>
<p>The supported Properties:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Titles on charts</li>
<li>X-axis and Y-axis Titles will be renamed</li>
<li>Text Properties like font style ,size and color</li>
<li>Background color</li>
<li>Grid lines</li>
<li>Borders for charts</li>
<li>Alias name for values</li>
<li>Legends will be enabled only if present</li>
<li>Color of Chart:</li>
<ul class="descr-seclevel" style="margin-left: 20px;">
<li>If color is applied it will be added else default color is applied</li>
<li>If a chart contains multiple color representing its data and if palate is assigned it will be applied </li>
</ul>
</ul>
</article>
</section>
<section class="main-section" id="actions">
<header>
<h1>Actions</h1>
</header>
<article>
<p>Actions supported:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Only on-select is supported</li>
<li>With Actions from one dashboard to different dashboard interacts with all charts in target dashboard</li>
</ul>
</article>
</section>
</div>
</div>
</body>
</html>

If you put an IntersectionObserver on each of the main sections the system will tell you when it comes into view or goes out of view.
Then you can add or remove the active class from the related link in the menu.
This snippet gives a demo but it had to shorten the overall length of the menu area just so we got to see the content below and it also fixed it otherwise it scrolled up and the effect of adding the active class couldn't be seen as the menu item was off the screen.
To make it obvious which section(s) are in view a lime background has been put on the link.
Note, there is some thought needed on what 'active' actually means since more than one section can be in the viewport at once. This snippet does not attempt to tackle that - it's ouside the scope of this question.
The snippet needs to be viewed full page.
const callback = (entries, observer) => {
entries.forEach(entry => {
const id = entry.target.id;
const el = document.body.querySelector('[href="#' + id + '"]');
if (entry.isIntersecting) {
el.classList.add('active');
} else {
el.classList.remove('active');
}
});
};
const sections = document.querySelectorAll('.main-section');
const options = {
threshold: 0.33
};
const observer = new IntersectionObserver(callback, options);
sections.forEach(section => {
observer.observe(section);
});
.ion-help-circled {
cursor: pointer;
}
.help-row {
flex-wrap: nowrap;
max-width: 100%;
}
.help-menu {
background-color: #efefef;
overflow: auto;
padding: 15px;
height: 85vh;
height: 30vh;
/* changed for demo so we can see stuff */
}
.help-descr {
position: relative;
background-color: white;
padding: 25px 25px;
overflow: auto;
height: calc(100vh - 107px);
border: 1px solid #efefef;
}
.help-menu ul .front-otherfeature-li {
margin-left: 18px;
}
.help-menu ul li {
list-style-type: none;
margin: 8px;
}
.help-menu ul .backend-head,
.help-menu ul .frontend-head {
margin-left: 0px;
}
.backend-feature li a,
.frontend-feature li a,
.frontend-otherfeature li a {
padding: 0;
text-decoration: none;
color: black;
}
.help-menu li .active {
font-weight: bold;
background-color: lime;
/* ADDED JUST FOR DEMO */
}
.help-menu a:hover {
font-weight: bold;
}
.main-section {
background-color: white;
}
section {
display: flex;
flex-direction: column;
padding-bottom: 15px;
}
article {
display: flex;
flex-direction: column;
padding-left: 30px;
}
.main-section ul>li {
margin-top: 6px;
}
.main-section p {
margin-bottom: 0px;
}
.backend-feature-arrow,
.frontend-feature-arrow,
.other-feature-arrow {
margin-right: 6px;
cursor: pointer;
}
.selected-item span {
padding: 6px;
}
.descr-seclevel {
list-style-type: square;
}
<div style="position: fixed; z-index: 1;">
<!-- added just for demo -->
<div id="header">
<div class="dashboard-header">
<div class="dashboard-left-header">
<ul style="margin-bottom: 0px;">
<li>
<a style="cursor: default;" class="logo" href=""><img src="./assets/img/img1.png"></img>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row help-row">
<div class="col-sm-3 help-menu">
<ul>
<li style="font-weight: bold;">Supported Features</li>
<li>
<ul>
<li class='backend-head'><i class="backend-feature-arrow ion-ios-arrow-down" style="font-size:18px ;display:inline-block"></i>Backend</li>
<li>
<ul class="backend-feature">
<li class="backend-feature-li">Datasources</li>
<li class="backend-feature-li">Joins</li>
</ul>
</li>
<li class='frontend-head'><i class="frontend-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Frontend</li>
<li>
<ul class="frontend-feature">
<li class="frontend-feature-li">Properties</li>
<li class="frontother-head"><i class="other-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Other Features</li>
<li>
<ul class="frontend-otherfeature">
<li class="front-otherfeature-li">Actions</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!--ADDED -->
<div class="col-sm-9 help-descr">
<div class='selected-item'></div>
<section class="main-section" id="datasource">
<header>
<h1>Datasources</h1>
</header>
<article>
<p>The supported Datasources:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Excel</li>
<li>Csv</li>
<li>Oracle Database</li>
<li>MSSQL server</li>
<li>PostgreSQL</li>
<li>MySQL</li>
</ul>
</article>
</section>
<section class="main-section" id="joins">
<header>
<h1>Joins</h1>
</header>
<article>
<p>The supported Joins:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Inner Join</li>
<li>Left Join</li>
<li>Right Join</li>
<li>Full Outer Join</li>
</ul>
</article>
</section>
<section class="main-section" id="properties">
<header>
<h1>Properties</h1>
</header>
<article>
<p>The supported Properties:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Titles on charts</li>
<li>X-axis and Y-axis Titles will be renamed</li>
<li>Text Properties like font style ,size and color</li>
<li>Background color</li>
<li>Grid lines</li>
<li>Borders for charts</li>
<li>Alias name for values</li>
<li>Legends will be enabled only if present</li>
<li>Color of Chart:</li>
<ul class="descr-seclevel" style="margin-left: 20px;">
<li>If color is applied it will be added else default color is applied</li>
<li>If a chart contains multiple color representing its data and if palate is assigned it will be applied </li>
</ul>
</ul>
</article>
</section>
<section class="main-section" id="actions">
<header>
<h1>Actions</h1>
</header>
<article>
<p>Actions supported:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Only on-select is supported</li>
<li>With Actions from one dashboard to different dashboard interacts with all charts in target dashboard</li>
</ul>
</article>
</section>
</div>
</div>

jQuery .toggleClass not working as expected

I have created a mini tab filter but it's not working as correctly. It only works when you click and unclick one tab at a time. Right now if you click on a tab and then another tab, the content from the previous clicked tab still shows also the previous clicked tab keeps the class "current" when it's not suppose too. I tried fixing this with the commented JS code but that makes the whole thing untoggleble. Thanks!
$(document).ready(function () {
$('.tab').click(function () {
var tabID = $(this).data('tabid');
// $('.iconsContainer').children().removeClass('current');
$(this).toggleClass('current');
// $('.iconContainerMore').removeClass('hideMoreText');
$('.iconContainerMore', this).toggleClass('hideMoreText');
// $('.tripctychContent-container').children().removeClass('showText');
$('.tripctychContent-container').find("[data-blockid=" + tabID + "]").toggleClass('showTopicContent');
});
});
.hideMoreText{
display: none;
}
.hideTopicContent{
display: none;
}
.showTopicContent{
display: block;
}
.tab{
cursor: pointer;
}
.iconsContainer{
display: flex;
justify-content: space-between;
}
.tab p:first-of-type{
padding: 30px;
background: blue;
color: white;
}
.current p:first-of-type{
background: black !important;
}
.tripctychContent-container p{
background: red;
color: white;
}
p{
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="iconsContainer">
<a class="tab" data-tabid="topic1">
<div>
<p>Topic 1 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
<a class="tab" data-tabid="topic2">
<div>
<p>Topic 2 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
<a class="tab" data-tabid="topic3">
<div>
<p>Topic 3 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
</div>
<div class="tripctychContent-container">
<div class="field--name-field-topic-1-content hideTopicContent" data-blockid="topic1">
<p>Topic 1 body</p>
</div>
<div class="field--name-field-topic-2-content hideTopicContent" data-blockid="topic2">
<p>Topic 2 body</p>
</div>
<div class="field--name-field-topic-3-content hideTopicContent" data-blockid="topic3">
<p>Topic 3 body</p>
</div>
</div>

Your code does not remove current from other "tab"s - nor does it remove hwoTopicContent from other tab contents .. it only toggles the tab you click
The following works
$(document).ready(function () {
$('.tab').click(function () {
var tabID = $(this).data('tabid');
var isCurrent = !$(this).hasClass('current');
$('.tab').removeClass('current');
$(this).toggleClass('current', isCurrent);
$('.iconContainerMore').removeClass('hideMoreText');
$('.iconContainerMore', this).toggleClass('hideMoreText', isCurrent);
// $('.tripctychContent-container').children().removeClass('showText');
$('.tripctychContent-container>div').removeClass('showTopicContent');
$('.tripctychContent-container').find("[data-blockid=" + tabID + "]").toggleClass('showTopicContent', isCurrent);
});
});
.hideMoreText{
display: none;
}
.hideTopicContent{
display: none;
}
.showTopicContent{
display: block;
}
.tab{
cursor: pointer;
}
.iconsContainer{
display: flex;
justify-content: space-between;
}
.tab p:first-of-type{
padding: 30px;
background: blue;
color: white;
}
.current p:first-of-type{
background: black !important;
}
.tripctychContent-container p{
background: red;
color: white;
}
p{
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="iconsContainer">
<a class="tab" data-tabid="topic1">
<div>
<p>Topic 1 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
<a class="tab" data-tabid="topic2">
<div>
<p>Topic 2 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
<a class="tab" data-tabid="topic3">
<div>
<p>Topic 3 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
</div>
<div class="tripctychContent-container">
<div class="field--name-field-topic-1-content hideTopicContent" data-blockid="topic1">
<p>Topic 1 body</p>
</div>
<div class="field--name-field-topic-2-content hideTopicContent" data-blockid="topic2">
<p>Topic 2 body</p>
</div>
<div class="field--name-field-topic-3-content hideTopicContent" data-blockid="topic3">
<p>Topic 3 body</p>
</div>
</div>

It is simple. Just remove all classes and set only to current.
$('.tab').click(function () {
var tabID = $(this).data('tabid');
// remove all already set classes
$('.iconContainerMore').removeClass('hideMoreText');
$('.tripctychContent-container').find("[data-blockid]").removeClass('showTopicContent');
// show current
$('.iconContainerMore', this).addClass('hideMoreText');
$('.tripctychContent-container').find("[data-blockid=" + tabID + "]").addClass('showTopicContent');
});

Jquery Move custom tabs to next

i have some basic html/css tabs and i want want to move tab to next by clicking a link at bottom of every tab.
HTML
<ul class="tabs">
<li class="active">
Explainer (2mins)
<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>
Sample Lessons
<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();
});
});
it is working fine for me now as i click on tab its changes.
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">
Explainer (2mins)
<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>
Sample Lessons
<div class="content coltab">
<div>
Content B
</div>
<h4> Next tab: See the Your Offer. </h4>
</div>
</li>
<li>
Special Offer
<div class="content">
<div class="coltab">
Content C
</div>
<h4>Next tab: To Register and Subscribe>>></h4>
</div>
</div>
</li>
<li>
Subscribe
<div class="content coltab">
<div>
Content D
</div>
<div>
<h4>Next tab: To Request a callback</h4>
</div>
</div>
</li>
<li>
Request a Callback
<div class="content coltab">
<div>
Content E
</div>
<h4>Next tab: Reviews</h4>
</div>
</div>
</div>
</li>
<li>
Reviews
<div class="content">
<div>
Content F
</div>
<h4>Back to first tab</h4>
</div>
</div>
</div>
</li>
</ul>

You can add this code:
$("h4").click(function(){
var activeTab = $("ul.tabs > li.active");
var nextTab = (activeTab.is(':last-child') == true ? $("ul.tabs > li:first") : $("ul.tabs > li.active").next("li"));
nextTab.find("a").trigger("click")
});
it will allow you to click on the h4 aka next and move to the next content
Working 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();
});
$("h4").click(function(){
var activeTab = $("ul.tabs > li.active");
var nextTab = (activeTab.is(':last-child') == true ? $("ul.tabs > li:first") : $("ul.tabs > li.active").next("li"));
nextTab.find("a").trigger("click")
});
});
.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">
Explainer (2mins)
<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>
Sample Lessons
<div class="content coltab">
<div>
Content B
</div>
<h4> Next tab: See the Your Offer. </h4>
</div>
</li>
<li>
Special Offer
<div class="content">
<div class="coltab">
Content C
</div>
<h4>Next tab: To Register and Subscribe>>></h4>
</div>
</div>
</li>
<li>
Subscribe
<div class="content coltab">
<div>
Content D
</div>
<div>
<h4>Next tab: To Request a callback</h4>
</div>
</div>
</li>
<li>
Request a Callback
<div class="content coltab">
<div>
Content E
</div>
<h4>Next tab: Reviews</h4>
</div>
</div>
</div>
</li>
<li>
Reviews
<div class="content">
<div>
Content F
</div>
<h4>Back to first tab</h4>
</div>
</div>
</div>
</li>
</ul>

Open one div at a time and close all others which are opened jquery

Trying to implement a show/hide description box.
If the user clicks on the first showDesc link it opens it's description box.
Then if the user clicks the second showDesc link it opens it's description box and should close all the others which are opened.
it below :
Below is my code:
$(".showDesc").click(function () {
$(".descContainer").toggleClass("show");
});
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
display: none;
line-height: 24px;
background-color: #fdfdfd;
}
.descContainer.show {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
display: block;
line-height: 24px;
background-color: #fdfdfd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
</section>
</main>

Your issue is because you're changing the class on all the .descContainer elements at once, not just the one related to the clicked .showDesc.
To fix this you need to use DOM traversal to get the closest('.feedContainer) then next() to get the element you want to toggle, like this:
$(".showDesc").click(function() {
var $target = $(this).closest('.feedContainer').next(".descContainer").toggleClass("show");
$(".descContainer").not($target).removeClass('show'); // hide other open elements
});
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: none;
line-height: 24px;
background-color: #fdfdfd;
}
.descContainer.show {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: block;
line-height: 24px;
background-color: #fdfdfd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
</section>
</main>

You don't need jQuery for that, you don't even need javascript for that. Setting ids and internals links on your HTML + using the :target CSS pseudo-class will do.
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
line-height: 24px;
display:none;
}
.descContainer:target {
display:block;
}
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc" href="#1">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer" id="1">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc" href="#2">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer" id="2">
<div>Description Text</div>
</div>
</article>
</section>
</main>

Develop Reference

JavaScript is the programming language of the Web.

Fade-out Left & Fade-in Right animation with jQuery - javascript

Related

How to adjust the height for images with different heights [duplicate]

Add active class to menu li on scrolling through section in div

jQuery .toggleClass not working as expected

Jquery Move custom tabs to next

Open one div at a time and close all others which are opened jquery

Categories

Resources