We Keep Coding

How to toggle clicked menu link and untoggle all of toggled links

My website came with this javascript for submenu toggle that work, however, when I click a new menu link the rest toggled links does not close so all them are left open.
How to toggle only clicked link and untoggle or remove all "open" links? If you have a new format of javascript that's fine too.
jQuery(function($) {
$('li.has-submenu span.icon-caret').click(function(e){
var $me = $(this);
if($me.siblings('.wsite-menu-wrap').hasClass('open')) {
$me.siblings('.wsite-menu-wrap').toggleClass('open');
} else {
$me.siblings('.wsite-menu-wrap').addClass('open');
}
});
});
HTML:
<div id="navMobile" class="nav mobile-nav">
<ul class="wsite-menu-default">
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Style</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Life</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Work</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
</ul>
</div>
</li>
</ul>
</div>

Remove the open class from each element first : $('.open').removeClass('open');

First I would remove the display: none if you have no animations with jQuery on the menues. Further I don't know your CSS but you can try it like the following example
$(document).ready(function() {
$('#navMobile .wsite-menu-item').on('click', toggleMenuLink);
function toggleMenuLink(event) {
var target = $(event.target).parent();
event.preventDefault();
target.siblings().removeClass('open');
if (target.hasClass('has-submenu')) {
target.toggleClass('open');
}
}
});
#navMobile .has-submenu > .wsite-menu-wrap,
#navMobile .has-submenu > .wsite-menu {
display: none;
}
#navMobile .has-submenu.open > .wsite-menu-wrap,
#navMobile .has-submenu.open > .wsite-menu {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navMobile" class="nav mobile-nav">
<ul class="wsite-menu-default">
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Style</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
<li class="wsite-menu-item-wrap">
<a class="wsite-menu-item">New 1</a>
<span class="icon-caret"></span>
</li>
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Life</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
<li class="wsite-menu-item-wrap">
<a class="wsite-menu-item">New 2</a>
<span class="icon-caret"></span>
</li>
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Work</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
</ul>
</div>
</li>
</ul>
</div>

I was able to crack the code...
$('li.has-submenu span.icon-caret').on('click', function(e) {
event.preventDefault();
var $me = $(this);
if ($me.parent().hasClass('open')) {
$me.parent().removeClass('open');
$me.find('.open').removeClass('open');
}
else {
$('.open').removeClass('open');
$me.parents('.has-submenu').children('.wsite-menu-wrap').addClass('open');
}
});

Click function not firing on every click

I'm working on this portfolio site of mine
http://miketest.best/
and the top right hamburger .toggleClass() doesn't fire immediately on every click. Seems to work but there's some weird delay sometimes that doesn't make it fire/toggle immediately upon each click (if at all)?
If useful this is Wordpress and using it on my custom theme.
jQuery(document).ready(function($) {
$('.cls').click(function(){
console.log('fire');
$('.open').toggleClass('oppenned');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="open">
<span class="cls"></span>
<span>
<ul class="sub-menu ">
<li onclick="slideTo('slide-2')">HOME
</li>
<li onclick="slideTo('slide-0')">ABOUT
</li>
<li onclick="slideTo('slide-1')">SERVICES
</li>
<li onclick="slideTo('slide-3')">PORTFOLIO
</li>
<li onclick="slideTo('slide-4')">CONTACT
</li>
</ul>
</span>
<span class="cls"></span>
</div>

Your trigger class is .cls,but in your DOM you have don't give any visible content to click.I was added .cls to a string click me and added that .cls class some styling.
Check out this
jQuery(document).ready(function($) {
$('.cls').click(function(){
console.log('fire');
$('.open').toggleClass('oppenned');
});
});
.oppenned{
background:#e3e3e3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="open">
<span class="cls"></span>
<span>
<ul class="sub-menu ">
<li onclick="slideTo('slide-2')">HOME
</li>
<li onclick="slideTo('slide-0')">ABOUT
</li>
<li onclick="slideTo('slide-1')">SERVICES
</li>
<li onclick="slideTo('slide-3')">PORTFOLIO
</li>
<li onclick="slideTo('slide-4')">CONTACT
</li>
</ul>
</span>
<span class="cls">click me</span>
</div>

Instead of applying click on .cls try it on .open.
jQuery(document).ready(function($) {
$('.open').click(function(){
console.log('fire');
$('.open').toggleClass('oppenned');
});
});

you was using click event on a non-visible span tag. That's why the click event is not working. just use any text or any element inside the span tag. Then you will get it visible. when you will on visible element it will work.
jQuery(document).ready(function($) {
$('.cls').click(function() {
console.log('fire');
$(this).parents('.open').stop().toggleClass('oppenned');
});
});
<style type="text/css">
.oppenned{
background:#e3e3e3;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="open">
<span class="cls">something to click me</span>
<span>
<ul class="sub-menu ">
<li onclick="slideTo('slide-2')">HOME</li>
<li onclick="slideTo('slide-0')">ABOUT</li>
<li onclick="slideTo('slide-1')">SERVICES</li>
<li onclick="slideTo('slide-3')">PORTFOLIO</li>
<li onclick="slideTo('slide-4')">CONTACT</li>
</ul>
</span>
<span class="cls">something to click me</span>
</div>

How do I toggle a class on click of an element but remove the same class from all other elements using JQuery?

I'm trying my best to word this properly so please bear with me. So I'm trying to only toggle a class (active) on an element that is clicked. If another element is clicked I would like to add the class "active" to the element clicked and remove the active class from any other element.
The problem is when I click on one element the "active" class is added but then when I click on another element the "active" class isn't removed from the other elements
$("li.test a").click(function() {
$(this).toggleClass("active");
});
$("li.test a").click(function() {
$(this).toggleClass("active");
});
$("li.test a").click(function() {
$(this).toggleClass("active");
});
HTML
<li class="test1">
<a href="#" class="">
</li>
<li class="test1">
<a href="#" class="">
</li>
<li class="test1">
<a href="#" class="">
</li>
<li class="test2">
<a href="#" class="">
</li>
<li class="test2">
<a href="#" class="">
</li>
<li class="test2">
<a href="#" class="">
</li>

Here's the working code:
$("li.test a").on("click",function() {
if($(this).hasClass("active")){
$(this).removeClass("active");
} else{
$("a.active").removeClass("active");
$(this).addClass("active");
}
});
.active{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
(Working pen)
Be aware you have classes "test1" and "test2" in the HTML, but class "test" in the JS!

Use the not method to skip your current element.
$("li.test a").click(function() {
var $this = $(this);
$('.test a').not($this).removeClass('active');
$this.toggleClass("active");
});

You have to remove the class from other elements before toggling.
Try this
$("li.test a").click(function() {
$("li.test a.active").removeClass("active");
$(this).toggleClass("active");
});
This first removes all the anchors with class active and then toggles the clicked anchor with the class.

Try this.
$("li").click(function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
})
li.active a{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="test1 active">
test
</li>
<li class="test1">
test
</li>
<li class="test1">
test
</li>
<li class="test2">
test
</li>
<li class="test2">
test
</li>
<li class="test2">
test
</li>
</ul>

Go through below mentioned link or below mentioned code may be it can help you.
JSFiddle
HTML Code
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
CSS Code
.active{
color:#00adef;
}
JAVASCRIPT Code
$("a").click(function(){
$('a').removeClass('active');
$(this).addClass("active");
});

add/remove active class for ul list with jquery?

I'm trying to remove and set an active class for a list item every time it's clicked. It's currently removing the selected active class but isn't setting it. Any idea what I'm missing?
HTML
<ul class="nav nav-list">
<li class='nav-header'>Test</li>
<li class="active">Page 1</li>
<li>Page 2</li>
<li><a href="page3.php">Page 3</li>
</ul>
jquery:
$('.nav-list').click(function() {
//console.log("Clicked");
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});

this will point to the <ul> selected by .nav-list. You can use delegation instead!
$('.nav-list').on('click', 'li', function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});

you can use siblings and removeClass method
$('.nav-link li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});

Try this,
$('.nav-list li').click(function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
In your context $(this) will points to the UL element not the Li. Hence you are not getting the expected results.

I used this:
$('.nav-list li.active').removeClass('active');
$(this).parent().addClass('active');
Since the active class is in the <li> element and what is clicked is the <a> element, the first line removes .active from all <li> and the second one (again, $(this) represents <a> which is the clicked element) adds .active to the direct parent, which is <li>.

In my case I have div element with same class. Now I added the active class on it using jquery check the code.
div element
<div class="previewBox" id="first_div">
...
</div>
<div class="previewBox" id="second_div">
...
</div>
<div class="previewBox" id="third_div">
...
</div>
jquery code
$(".previewBox").click(function () {
$(".previewBox.active").removeClass('active')
$(this).addClass('active')
});
css
.active {
background-color:#e9f1f5;
border-left:4px solid #024a81;
}
Demo
click_this

$(document).ready(function(){
$('.cliked').click(function() {
$(".cliked").removeClass("liactive");
$(this).addClass("liactive");
});
});
.liactive {
background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul
className="sidebar-nav position-fixed "
style="height:450px;overflow:scroll"
>
<li>
<a className="cliked liactive" href="#">
check Kyc Status
</a>
</li>
<li>
<a className="cliked" href="#">
My Investments
</a>
</li>
<li>
<a className="cliked" href="#">
My SIP
</a>
</li>
<li>
<a className="cliked" href="#">
My Tax Savers Fund
</a>
</li>
<li>
<a className="cliked" href="#">
Transaction History
</a>
</li>
<li>
<a className="cliked" href="#">
Invest Now
</a>
</li>
<li>
<a className="cliked" href="#">
My Profile
</a>
</li>
<li>
<a className="cliked" href="#">
FAQ`s
</a>
</li>
<li>
<a className="cliked" href="#">
Suggestion Portfolio
</a>
</li>
<li>
<a className="cliked" href="#">
Bluk Lumpsum / Bulk SIP
</a>
</li>
</ul>;

After Use jQuery a href link not working

HTML:
<ul class="current">
<li>
<a href="#nogo"><b>Products</b>
<div class="select_sub show">
<ul class="sub">
<li class="sub_show">Add product</li>
</ul>
</div>
</a>
</li>
</ul>
<ul class="select">
<li>
<a href="#nogo"><b>Item</b>
<div class="select_sub">
<ul class="sub">
<li>Add Item</li>
</ul>
</div>
</a>
</li>
</ul>
jQuery:
$("ul").click(function (e) {
e.preventDefault(); // if iI comment that line a href link work but navigation not work
var $this = $(this);
var $siblings = $(this).siblings();
$this.addClass("current").removeClass("select");
$this.find('.select_sub').addClass('show');
$siblings.removeClass("current").addClass('select');
$siblings.find('.select_sub').addClass('show');
});
If I click on the Add product link, there is redirection on this url product/product.php
Thanks

My guess is that, when you say e.preventDefault(), you are actually telling to prevent ul default, which is nothing. Try to call preventDefault() directly on the link.