We Keep Coding

jQuery add remove selected class

I need to add active class to my li list and it works perfectly but I don't want to remove active class if someone click already selected li.
Here is my code.
$('.nav li').click(function() {
$(this).toggleClass('active').siblings().removeClass('active');
});
So tried this way but no any luck.
$('.nav li.active').click(function() {
$(this).addClass('active');
});
Any ideas?

You can try with this:
$('.nav li').click(function() {
$('.nav li').removeClass('active');
$(this).addClass('active');
});
By removing active class from all li items, then adding new active class for current item.

try this. Goodluck
$('.nav').on('click', 'li', function() {
$('.nav li.active').removeClass('active');
$(this).addClass('active');
});

Active tickmark on page load in selected dropdown item

I have written a JavaScript to show a tick mark just to the right side of the selected drop-down item (CSS class name active):
$(document).ready(function () {
$('.select-country ul li a').click(function () {
$('.select-country ul li a').removeClass("active");
$(this).addClass("active");
return false;
});
});
Its works well, but I have a problem here.
Problem:
When I refresh the page the drop-down will default to a default selected item. But that selected item is not showing the tick mark.
How do I rewrite the query to show the tick mark for the default selected item in drop-down?

You need to loop over the li so that respective links are responsible for there own events,
$(document).ready(function () {
$('.select-country ul li a.default').addClass("active");
//loop over all li
$('.select-country ul li a').each(function () {
//remove first from any active link
$(this).click(function(){
$('.select-country ul li a').removeClass("active");
//find and add active on "this" link
$(this).addClass("active");
return false;
});
});
});

Removing active class on click issue

I have some filters on a project I'm working on that once clicked, it's given a class of active, which will then show a div inside the clicked list item called info-pane.
The filters are the 6 blue boxes. I am using the jQuery below to add and remove the active class, however the issue comes when I want to try and remove the active class by clicking the list item that has the active class state but it doesn't seem to work.
The code I'm trying;
$(".filters > ul > li").click(function() {
$(".filters > ul > li").removeClass("active");
$(this).toggleClass("active");
});
$(".filters > ul > li.active").click(function() {
$(this).removeClass("active");
});
Here's a link to the live project; http://client.n8geeks.com/

Try this:
$(".filters > ul > li").click(function() {
$(".filters > ul > li").not($(this).toggleClass("active")).removeClass("active");
});

First you don't need to make two events for that click. Here is example to do in one. But i can't see where your problem is. In your live project i can see that filters change after you click..?
$(".filters > ul > li").click(function() {
$(".filters").find('li').removeClass('active');
$(this).addClass("active");
});
Edit:
I don't know if i understood correctly, but i can see when you click on 'x' nothing happens.. so function that reset your filters.
(non-tested)
$(".close").click(function(){
$(this).closest('ul > li').find('input[type="checkbox"]').each(function( index ) {
$(this).prop('checked', false);
});
});

Jquery selector - affecting element inside same DOM element

My CMS generates menus as lists without any id's and classes. For submenus, there are nested lists.
I made jquery script for expanding submenus:
$(function () {
$(".wrapper ul li").click(function () {
if ($(this).has("ul").length) {
$("a", this).removeAttr('href');
$("ul", this).slideToggle();
}
});
});
My problem is that this script reacts to clicking whole li area and I want it to react to clicking link inside li. Of course I just have to add "a" to selector making it ".wrapper ul li a" but what about condition checking if there is ul nested inside li? And slidetoggle selector. How should I change these?

This might work with minimal modification to your original code.
$(function () {
$(".wrapper ul li a").click(function ()
{
this = $(this).parent();
if ($(this).has("ul").length) {
$("a", this).removeAttr('href');
$("ul", this).slideToggle();
}
}
);
});
Test and see if it works. I have not tested it. Cheers

Responsive tabs to accordion issue

I'm in the process of modifying a responsive tabs to accordion, please see the jsfiddle
When the current 'active' tab is clicked it hides which I understand is what it is meant to do in the code, however I would like it if this does not happen and doesn't hide. Here is the current javascript:
$('#nav').children('li').first().children('a').addClass('active')
.next().addClass('is-open').show();
$('#nav').on('click', 'li > a', function() {
if (!$(this).hasClass('active')) {
$('#nav .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('#nav').find('.active').removeClass('active');
$(this).addClass('active');
} else {
$('#nav .is-open').removeClass('is-open').hide();
$(this).removeClass('active');
}
});
It's basically just applying classes dependent on what is clicked and what is currently active or not. I guess I need to change the logic of this?

If what I understood is correct that you want to stop hiding the active div when clicked again. Just remove the else part...
$('#nav').children('li').first().children('a').addClass('active')
.next().addClass('is-open').show();
$('#nav').on('click', 'li > a', function() {
if (!$(this).hasClass('active')) {
$('#nav .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('#nav').find('.active').removeClass('active');
$(this).addClass('active');
}
});
Check this Fiddle