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);
});
});
Related
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;
});
});
});
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
can you please tell me how to get alert of id when user click of submenu.
Actually I am adding submenu of button click with id"menu_tc_1","menu_tc_2".I want to click of submenu ? and show alert ?
http://jsfiddle.net/eHded/1553/
$(document).on('click',".menuClick",function(){
alert('jii'+this.id)
})
You need to listen to clicks on the menu elements, not the entire menu.
$(document).on('click',".menuClick a",function(e){
alert('jii'+$(this).parent().prop('id'))
})
You click on the a so find it's parent's id
http://jsfiddle.net/eHded/1565/
Try this:
$(document).on('click', ".menuClick ul li > a", function () {
alert('jii' + $(this).parent().attr('id'));
});
Assuming you want the child elements that are added to the menu when you click the add button.
Edit: to add a selected class to the parent li element:
$(document).on('click', ".menuClick ul li > a", function () {
$(this).parent().addClass('selected');
});
Try this instead
$(document).on('click',".menuClick li",function(e){
alert('jii'+this.id)
$(".menuClick li").removeClass("active");
$(this).addClass("active");
e.stopPropagation();
})
This will solve your issue.
Demo
I was able to achieve a content switcher with the block of code below but I'm looking for a way to simplify it. There are up to 10 or more topics to switch between, how do I simplify it so that the code wouldn't be too large, instead of having a block of code per DIV.
jQuery(document) .ready(function () {
$('.topic-intro:not(:nth-of-type(1))') .hide();
$('#mid-nav-in ul li:nth-of-type(1)') .addClass('active');
$('#mid-nav-in ul li a:nth-of-type(1)') .click(function () {
$('.topic-intro:not(:nth-of-type(1))') .hide();
$('.topic-intro:nth-of-type(1)') .show();
$('#mid-nav-in ul li:not(:nth-of-type(1))') .removeClass('active');
$('#mid-nav-in ul li:nth-of-type(1)') .addClass('active');
});
});
jQuery(document) .ready(function () {
$('#mid-nav-in ul li:nth-of-type(2) a') .click(function () {
$('.topic-intro:not(:nth-of-type(2))') .hide();
$('.topic-intro:nth-of-type(2)') .show();
$('#mid-nav-in ul li:nth-of-type(2)') .addClass('active');
$('#mid-nav-in ul li:not(:nth-of-type(2))') .removeClass('active');
});
});
It appears from your code that you are using the links in #mid-nav-in to show the corresponding .topic-intro and then hiding all others. It also appears that the code depends on the .topic-intro elements being in the same order as the links in the #mid-nav-in. If this is the case something like to following would work:
$('#mid-nav-in li a').on('click', function(){
// Remove 'active' Class from all <li/>
$('#mid-nav-in li').removeClass('active');
// Add 'active' Class to <li/> of Clicked Link
$(this).closest('li').addClass('active');
// Hide All .topic-intro elements
$('.topic-intro').hide();
// Show .topic-intro element at the Same index of Clicked Link
$('.topic-intro').eq($(this).closest('li').index()).show();
return false; // prevent default action
});
// Automatically Select the First Link
$('#mid-nav-in li a').eq(0).trigger('click');
Here is a fiddle as an example: http://jsfiddle.net/6hd97/2/
I hope this helps.
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