I have some divs (#div1, #div2, #div3) that change appearence on click, they toggle a class using this script:
$(document).ready(function() {
$("#parent_div").on('click', '.current_class', function () {
$(this).toggleClass("new_class");
});
});
Now I want the the divs to be unable to toggle at the same time, so they work kinda like a radio-button with same "name".
Example: Imagine three divs that looks the same (default class), then you click on one of the divs (example #div1) and that one toggles a new class and change appearence. Now you click on one of the other two and this one also change appearence (toggle class), at the same time when this one change appearence #div1 changes back to the default class.
So there can only be one div of those three that toggles the new class at once.
Is this possible?
You first need to remove the class from all the divs, and then add it to the current one. Try this:
$("#parent_div").on('click', '.current_class', function () {
$('#parent_div .new_class').removeClass('new_class'); // remove exisiting
$(this).addClass("new_class"); // add to current
});
Update
Added functionality to remove class from current:
$("#parent_div").on('click', '.current_class', function () {
var $this = $(this);
if (!$this.hasClass('new_class')) {
$('#parent_div .new_class').removeClass('new_class');
$this.addClass("new_class");
}
else {
$this.removeClass("new_class");
}
});
Use:
$(document).ready(function() {
$("#parent_div").on('click', '.current_class', function (){
if($(this).hasClass('.new_class')){
$(this).removeClass('.new_class');
}else {
$('.new_class').removeClass('.new_class');
$(this).addClass('.new_class');
}
});
});
Updated: Code now allows for toggling of current element with class .new_class.
This would be possible, but you'll need to reset all the other divs manually.
An example would be :
I have 3 divs available with id's div-1, div-2 and div-3.
I'm using a default class 'default' and a definition class so i can click them 'clickable', and my other class would be 'selected'.
To implement this you would need to do the following:
$(document).ready(function() {
$('#parent-div').on('click, 'clickable', function() {
$('.selected').removeClass("selected").addClass("default");
$(this).addClass("selected");
})
});
I hope this helps.
I didn't have the possibility to check if the syntax is exactly correct, but I believe this does the job as required.
Kind regards,
NDakotaBE
Related
i have this code and i am trying to add and remove class when chat button is clicked.
live url is here.
https://itsneotpras.myshopify.com/
when chatbox is clicked then bounceUp99 class is added and it works as expected and when that chat icon is clicked again it is removed but that moment i want to remove bounceUp99 and add class bounceDown99. below is my code. i have commented out codes which i have removed. any help will be great. if bounceDown99 is added when clicked again then chat box should close with some animation. you can see that by manually replacing bounceUp99 with bounceDown99 when chat box is opened
jQuery("#pushdaddy-button,#pushdaddy-close").click(function() {
// jQuery("#pushdaddy-box").removeClass("bounceDown99");
// jQuery("#pushdaddy-box").addClass("bounceUp99");
if(jQuery("#pushdaddy-box").hasClass('bounceDown99')) {
// jQuery("#pushdaddy-box").removeClass('bounceDown99');
// jQuery("#pushdaddy-box").addClass('bounceUp99');
// jQuery("#pushdaddy-box").removeClass('bounceUp99');
}
else if(jQuery("#pushdaddy-box").hasClass('bounceUp99')) {
jQuery("#pushdaddy-box").removeClass('bounceUp99');
// jQuery("#pushdaddy-box").addClass('bounceDown99');
}
else {
jQuery("#pushdaddy-box").addClass('bounceUp99');
jQuery("#pushdaddy-box").removeClass('bounceDown99');
}
})
There is a toggleClass method to do this.
You can learn more about it in the official documentaion.
<div onclick = "jQuery(this).toggleClass('my-class')">div tag</div>
Note: Consider using $('selector') instead of jQuery('selector').
Toggle Class will work if you have the 'bounceUp99' class as default.
$(element).toggleClass("bounceUp99 bounceDown99");
This will remove class bounceUp99 and add the class bounceDown99. If you do that again, it will remove class bounceDown99 and reinstate class bounceUp99.
If you want to match the elements that expose either class, you can use a multiple class selector and write:
$(".bounceUp99, .bounceDown99").toggleClass("bounceUp99 bounceDown99");
But here,
We can't have bounceUp99 class as default. so, we can use hasClass,addClass and removeClass
$("h1").on("click", function () {
if ($(this).hasClass("a")) {
$(".a").addClass("b").removeClass("a");
} else if ($(this).hasClass("b")) {
$(".b").addClass("a").removeClass("b");
} else {
$(this).addClass("a");
}
});
Demo: https://codesandbox.io/s/optimistic-sunset-74gns?file=/index.html
So I have this problem that I guess is a walk in the park to fix.
I'm using the JS snippet below on a website I'm building and what the snippet does is it creates accordions for some HTML elements where the class .bapf_head is the header (control) of the accordion and the .bapf_body is the expand/collapse.
I wrote the if logic where the function checks if the .bapf_body is opened or not and will then add or remove a class to the .bapf_head depending on the state. This then results in a +/- symbol that indicates open/close depending on the state.
So the problem is that I have multiple Div's that uses the same class names and all of them gets updated with the .open class name when one of the accordions are opened or closed. So let's say I have three accordions and I open one of them, then all three gets the class .open added and hence all gets the '-' symbol even though only one accordion is open.
Anyone knows how to make sure only the clicked accordion gets the updated class-name rather then all of the accordions at the same time?
Code below;
jQuery(document).ready(function($) {
$(".bapf_head").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(300, function () {
$header.text(function () {
if ($content.is(":visible")) {
$(".bapf_head").addClass("open");
} else {
$(".bapf_head").removeClass("open");
};
});
});
});
});
if ($content.is(":visible")) {
$(this).addClass("open");
} else {
$(this).removeClass("open");
};
you need to reference the event-related DOM element, not select all the ones with that class
also, .click() is long deprecated afaik, you should use .on('click', ...
I have some menu items and in the menu I have a plus(+) sign. When I click on the plus sign it should add a class and look like cross. It is happening but when I click the cross sign it does not removing the sign so that I can get the plus sign again.
$(document).ready(function(){
$('.nav-link').click(function(){
$('.nav-link').removeClass('addplus');
$(this).addClass('addplus');
});
});
Here is the Example.
The issue is because you are always removing, then immediately adding the class back on the clicked element. To fix this exclude the current element from the removeClass() call using not(), then use toggleClass() to add/remove the class to the required element, like this:
$('.nav-link').click(function() {
$('.nav-link').not(this).removeClass('addplus');
$(this).toggleClass('addplus');
});
Updated fiddle
I've gone a bit around about the houses here, but this works using parent and siblings:
$('.nav-link').click(function() {
$(this).parent(".nav-item").siblings().children(".nav-link").removeClass('addplus');
$(this).toggleClass('addplus');
});
I wouldn't do a blanket removeClass across all matching elements like you've done, I'd pick them out by excluding the currently matched element. Revised fiddle: https://jsfiddle.net/epqxb6L7/5/
It's because your code is removing and adding the same class every time click event triggers. Try something like this
$(document).ready(function(){
$('.nav-link').click(function(){
$(this).toggleClass('addplus'); //THIS WILL ADD/REMOVE CLASS ALTERNATIVELY
});
});
You always add the class addplus in the last line of your click handler. Try the following instead:
$(document).ready(function(){
$('.nav-link').click(function(){
if ($(this).hasClass('addplus')) {
$(this).removeClass('addplus');
} else {
$(this).addClass('addplus');
}
});
});
The title says it all. I got a list of LI elements. When clicked on navigation the active li gets a class 'current' but this takes a second.
But when I use my code I need to click on the nav then the li opens and I need to click again to make the code register.
The place of the videos cannot be hardcoded! It needs to be dynamic.
(function($) {
$(document).ready(function(){
$('video').each(function() {
$(this).get(0).pause();
});
$('.slides').children('li').addClass('test');
});
$(document).on('click','span',function(){
if ( $('li').hasClass('current') ) {
$('li.test').find('video').each(function() {
$(this).get(0).pause();
});
$('li.current.test').find('video').each(function() {
$(this).get(0).play();
});
}
});
})(jQuery);
http://codepen.io/hennysmafter/pen/aNrVKG?editors=1010
Unfortunately I won't be available for the next hour or so but will be back after that! Everyone thank you for helping.
I found what is causing the issue :
You are playing the elements whose parent has ".current" class when a span is clicked.
But when you click an element, it et the ".show" class, and the previously selected span get the ".hide" class AND keeps the ".current" class, until the animation is finished (then the ".show" & ".hide" class are removed and the ".current" class switch elements).
One solution is changing the selectors like this :
$(document).on('click','span',function(){
console.log('the if is running');
$('.current, .hide').find('video').each(function() {
$(this).get(0).pause();
});
$('.show').find('video').each(function() {
$(this).get(0).play();
});
});
By doing this, whenever a span is clicked, you pause the element whose parents have the ".hide" class, and play the ones whose parents have the ".show" class.
Another solution should be creating an event when a class is applied (See jQuery - Fire event if CSS class changed).
So far I have this drop-down menu. When I click on either "Menu", "Menu1" or "Menu2", the links under it will drop down.
The problem:
I need to display only one drop-down at a time, so that the user can switch between them.
I tried to apply css('overflow', 'hidden'); to the menu currently dropped down, but it won't work, since the overflow: visible !important; is applied to the .clicked class.
Please help, anything will be highly appreciated!
Try when you click on a element remove class clicked from all elements and add class clicked to the element that is clicked
$("#product-menu>ul>li").click(function () {
var hidden = $(this).find('.clicked');
$("#product-menu>ul>li").removeClass('clicked');
$(this).addClass('clicked');
$('.productSubmenu').width(menuWidth);
});
DEMO
UPDATE
If you want also on second click menu to be closed try checking if clicked item has already class clicked:
$("#product-menu>ul>li").click(function () {
var hidden = $(this).find('.clicked');
if ($(this).hasClass('clicked')) {
$(this).removeClass('clicked')
} else {
$("#product-menu>ul>li").removeClass('clicked');
$(this).addClass('clicked');
}
$('.productSubmenu').width(menuWidth);
});
DEMO2
You also might want to close the links
$("#product-menu>ul>li").click(function () {
var hidden = $(this).find('.clicked');
$("#product-menu>ul>li").removeClass('clicked');
$("#product-menu .productSubmenu2").hide(); // this one I added
$(this).addClass('clicked');
$('.productSubmenu').width(menuWidth);
});