Develop Reference

How To Create A Client-Sided Search Bar Using Javascript

I'm trying to create a client-sided search bar using javascript and I'm not sure how to do that and get it to function properly. I'm trying to create one without using PHP since I have no experience with server-sided programming. How would you create one that works with the client-side? Do you need an index for the search results and an API as well? And how would you use an index and an API? The goal of the search bar is to find terms or words that are present on the webpage is what I'm trying to achieve with it. It's to give the user a chance to search for the name of an article present in the webpage. Here is my current code if you want to see it: https://jsfiddle.net/snt87eg9/1/
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="header">
<div id ="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
</div></div><br>
<div class="row">
<div class="leftcolumn">
<div class="card">
<div id="Title">
<h2>Article 1</h2>
<h5>Date</h5>
<p>Some text over there.,.. </p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<h2>Article 2</h2>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
```

You need a way to select the searchbar, articles and article titles,
lets say you give classes article and article-title and give the searchbar id="searchbar"
Document should look like this:
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search" id="searchbar">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="header">
<div id="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
</div>
</div><br>
<div class="row article">
<div class="leftcolumn">
<div class="card">
<div id="Title">
<a href="#">
<h2 class="article-title">Article 1</h2>
</a>
<h5>Date</h5>
<p>Some text over there.,.. </p>
</div>
</div>
</div>
</div>
<div class="row article">
<div class="card">
<div id="Title2">
<a href="#">
<h2 class="article-title">Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
Here's the way to filter out what you wrote in the searchbar:
<script>
$('#searchbar').keyup(function(){
let articles = $('.article'); //get all elements with class="article"
let keyword = $(this).val().toLowerCase(); //get the content of the searchbar
if(keyword == "") //show all elements if searchbar is empty
articles.show();
else{ //else loop through articles and check if the keyword is in the title div
articles.each(function(element) {
let title = $(this).find('.article-title').text().toLowerCase();
(title.indexOf(keyword) >= 0) ? $(this).show() : $(this).hide();
});
}
});
</script>
The script uses jQuery , you can put this before the script if you don't have it already imported :
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

I just took the time to make a client-side search javascript function. But if you are not too familiar with javascript try to learn a little bit more before implementing this type of things.
$(document).ready(function() {
$("#header").hide().fadeIn(2000);
});
$(document).ready(function() {
$("#title").hide().fadeIn(2000);
});
$(document).ready(function() {
$("#footer").hide().fadeIn(2000);
});
function searchInArticles(word) {
const articles = document.querySelectorAll(".card");
articles.forEach(article => {
if (article.innerHTML.includes(word)) {
article.style.display = "block";
article.scrollIntoView();
} else {
article.style.display = "none";
}
})
}
searchInArticles("Yes");
//searchInArticles("Some");
/* Add a gray background color with some padding */
body {
font-family: Arial;
padding: 20px;
background: #32cd32;
}
/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: #7df9ff;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 100%;
}
/* Add a card effect for articles */
.card {
background-color: #87ceeb;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #00bfff;
margin-top: 20px;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a,
.topnav input[type=text],
.topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- My link -->
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="header">
<div id="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
</div>
</div><br>
<div class="row">
<div class="leftcolumn">
<div class="card">
<div id="Title">
<a href="#">
<h2>Article 1</h2>
</a>
<h5>Date</h5>
<p>Yes text over there.,.. </p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Yes text over here..... </p>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<a href="#">
<h2>Article 2</h2>
</a>
<h5>Date</h5>
<p> Some text over here..... </p>
</div>
</div>
</div>
<div class="footer">
<div id="footer">
</div>
</div>
</body>
</html>

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

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>

Functionality like tabs but scenario with appending to another div

$('.day-col-content').each(function() {
$(this).on('click', function() {
$('.day-col').removeClass('selected')
$(this).parent().addClass('selected');
$(this).clone().appendTo('.selected-day');
$('.selected-day .day-col-content').addClass('selected');
});
});
.actual-weather {
float: left;
width: 100%;
margin-bottom: 20px;
text-align: center;
}
.selected-day .selected-day {
float: left;
width: 100%;
}
.selected-day .day-col-content {
display: none;
}
.selected-day .day-col-content.selected {
display: block
}
.days-box {
float: left;
width: 100%;
display: flex;
justify-content: center;
}
.day-col {
float: left;
width: 130px;
height: 130px;
position: relative;
margin: 0 10px 10px;
text-align: center;
cursor: pointer;
background:red;
}
.day-col.selected {
background:blue;
}
.day-col .day-col-content {
width: 100%;
position: absolute;
margin: 0;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="actual-weather">
<span class="selected-day"></span>
</div>
<div class="days-box">
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 1
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 2
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 3
</p>
</div>
</div>
<div>
I have scenario where I want to click on specific div and then this div append to another div ( selected day)
and then I want to switch between appended divs for showing selected div (day) (for functionality like tabs).
Problem is that all div are showing and I don't know how to manage thoose selected divs
Does somebody know how to achieve this?

You need to empty the div first then append the DATA or use .html() directly and it will overrite the data:
$('.selected-day').html('').append( $(this).clone() );
//OR
$('.selected-day').html( $(this).clone() );
NOTE: You don't have to loop using .each() to attach the click event to all the divs just use the selector directly like :
$('.day-col-content').on('click', function() {
...
});
SAMPLE
$('.day-col-content').on('click', function() {
$('.day-col').removeClass('selected');
$(this).parent().addClass('selected');
$('.selected-day').html($(this).clone());
});
.selected-day {
background-color: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
day 1
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
day 2
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
day 3
</p>
</div>
<hr>
<div class="selected-day"></div>

Hi I'm not sure about your styling but this would work as a custom tab version
$(document).on('click','.day-col-content',function(){
$('.day-col').removeClass('selected')
$(this).parent('.day-col').addClass('selected');
$('.selected-day').html($(this).clone());
$('.selected-day .day-col-content').addClass('selected');
});
.day-col.selected {
color:green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 1
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 2
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 3
</p>
</div>
</div>
<div class="selected-day"></div>

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>

jQuery accordian arrow toggle

I have got an accordian toggle working great - but I have noticed that the arrow is not toggling when a link other than the 'active link' is selected. Does anyone have any suggestions on how to do this?
$(document).ready(function(){
$('.q').on(action, function(){
$(this).next().slideToggle(speed)
.siblings('.a').slideUp();
var i = $(this).children('.q i');
i.toggleClass("fa-chevron-up fa-chevron-down");
});
});
.faq {
margin-bottom:1em;
}
.faq h4.q,
.faq div {
margin:0;
padding: 1.25em;
position:relative;
}
.faq h4.q {
border-bottom: 1px #cdd4d9 solid;
color: #eb9532;
cursor: pointer;
padding-right:3.1em;
}
.faq div.a {
border-bottom: 1px #cdd4d9 solid;
display: none;
padding-bottom:0;
}
.faq h4.q i {
color: #bdc4c9;
position:absolute;
right:1.25em;
top:1.25em;
}
<div class="faq">
<h4 class="q">Question 1<i class="fa fa-chevron-down"></i></h4>
<div class="a">
<p>Answer 1</p>
</div>
<h4 class="q">Question 2<i class="fa fa-chevron-down"></i></h4>
<div class="a">
<p>Answer 2</p>
</div>
<h4 class="q">Question 3<i class="fa fa-chevron-down"></i></h4>
<div class="a">
<p>Answer 3</p>
</div>
</div>

You should remove .q from this .children('.q i'):
var i = $(this).children('i');
because $(this) is the .q element itself.