On click at one element toogle class at the another element - javascript

how can I toggle (add/remove) class from element when clicked on whole another element. Right now I am using
$('.caption-trigger').click(function(){
$('.carousel-caption').toogle;
console.log("Hide caption");
});
So when user click on .caption-trigger the class is toggled on this element instead on .carousel-caption. Does anyone how to deal with this?
Thanks

You use .toggleClass():
$('.caption-trigger').click(function(){
$('.carousel-caption').toggleClass('your-class');
console.log("Hide caption");
});
this will toggle the class your-class on the element .carousel-caption

Your code looks incomplete. Otherwise
$('.carousel-caption').toggleClass('someClass', booleanVar);
should work just fine.

.toggle() is used to shor or hide the elements
$('.caption-trigger').click(function(){
$('.carousel-caption').toggleClass('classname');
console.log("Hide caption");
});
You can also use animation to toggle the elemnts by setting duration.
$('.caption-trigger').click(function(){
$('.carousel-caption').toggle("slow", function() {
console.log("Hide caption");.
}););
});

Related

Active class not working properly

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');
}
});
});

onclick function requires double click because of class assignment delay

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).

adding and remove classes on click events

I am working on a click event, which intially is pretty standard.
on.click: Remove the active class from all list items, then add active to the clicked list item.
ie
var li = $('.child-item');
li.click(function(){
li.removeClass('active');
li.addClass('active');
});
Works as expected. However, I also need a condition that if the active class is clicked again, it will remove the active class from the clicked item.
I tried this:
$('.child-item').toggle(function(e){
$('.child-item').removeClass('active');
$(this).addClass('active');
}, function() {
$('.child-item').removeClass('active');
$(this).removeClass('active');
});
but often the toggle is in the off state, so it requires a double click to get the toggle back on track. This seems like it would be a pretty straightforward solution, but I cannot seem to get it to work.
Added a jsFiddle here with another option. This is fine for when the same element is clicked, but it doesn't clear all active classes on each click.
Update
I got it working but TrueBlueAussie's answer is shorter and better. Here is my working fiddle:
https://jsfiddle.net/v7b8cbj5/
Your second click handler will only attach to matching "active" items when the event was registered.
Replace it all with just this:
$('.child-item').click(function(e){
$('.child-item.active').not(this).removeClass('active');
$(this).toggleClass('active');
});
You can use not() to exclude the current item from selected list of things to make inactive, then just toggle the selected one.
JSFiddle: https://jsfiddle.net/81ex7dmm/2/
.toggle() (Event) - is deprecated in jQuery 1.8 and removed in jQuery 1.9
Use add() with toggleClass() on .active <li>
$('.child-item').click(function(e){
$('li.child-item.active').add(this).toggleClass('active');
});
Updated Fiddle
var li = $('.child-item');
li.click(function(){
li.removeClass('active');
$(this).toggleClass('active');
});
Try it also :
$('.child-item').click(function(e){
$('.child-item.active').removeClass('active');
$(this).addClass('active');
});
FIDDLE DEMO

add and remove classes in order with jQuery

Im trying to say that, if my div doesnt have the class active add it. And if it does have the class active, remove it.
Ive the following, only my code adds the class, then continues the query and removes it at the end, what would the best solution be, 2 seperat click funcitons?
$('.work-showcase').click(function(){
if ( !$(this).hasClass('active') ){
$(this).addClass('active');
} else {
$(this).removeClass('active');
};
});
Use toggleClass method:
$(".work-showcase").click(function() {
$(this).toggleClass("active");
})
$("#YourID").removeClass('ClassName');
$("#YourID").addClass('ClassName');

Toggling a div with another div

i am trying to make a div toggle another div which appears underneath it.
I have managed to do this with a button, however i was wondering if you could do this with another div, so that when you clicked anywhere inside the div, it would make the other div appear and disappear etc...
Here are the two divs i have
//This div is the one you click on
<div id="more_toggle"></div><!---end more_toggle--->
//This div is the one that appears and disappears through the toggle
<div id="more_info">hello</div><!---end more_info--->
This is the script i use to toggle the divs through buttons, but it doesn't work with another div
$(function(){
$("#server_status_button").click(function(event){
event.preventDefault();
$("#status1").slideToggle();
});
});
Thanks for any help
$("#more_toggle").click(function(event) {
$("#more_info").slideToggle();
});​
jsFiddle example
Have you tried:
$(function() {
$('#more_toggle').click(function(e) {
$('#more_info').slideToggle();
});
});
If you want to hide use display toggling just try .toggle() instead of .slideToggle().
$('#more_toggle').click(function(){
$('#more_info').slideToggle();
});

Categories