I have this piece of code here:
$('.plus-area-current').click(function () {
$(".current-communities").slideToggle(function () {
$(".plus-area-current i").removeClass("fa-plus");
$(".plus-area-current i").addClass("fa-minus");
}, function () {
$(".plus-area-current i").removeClass("fa-minus");
$(".plus-area-current i").addClass("fa-plus");
});
});
When the user clicks plus-area-current, current-communities gets untoggled, what I am trying to is add / remove the fa-plus and fa-minus classes from an element pending if the element current-communities is toggled or not. This code above does not work, the element toggles but the class does not change, if I do this:
$('.plus-area-current').click(function () {
$(".current-communities").slideToggle();
$(".plus-area-current i").removeClass("fa-plus");
$(".plus-area-current i").addClass("fa-minus");
});
It works, but when I click to toggle it back up, its does not change back to the plus.
Use toggleClass() instead:
$('.plus-area-current').click(function () {
$(".current-communities").slideToggle();
$(".plus-area-current i").toggleClass("fa-plus fa-minus");
});
If you'd prefer the class change not to happen until the slideToggle() animation has completed, place that line within the callback, like this:
$('.plus-area-current').click(function () {
$(".current-communities").slideToggle(function() {
$(".plus-area-current i").toggleClass("fa-plus fa-minus");
});
});
Related
$(document).ready(function(){
$(window).scroll(function(){
if($(document).scrollTop()>50){
$("nav").addClass("fundal")
}
else{
$("nav").removeClass("fundal")
}
});
});
Instead of adding the "fundal" when I scroll, I want to add the class and remove it when I click, something like this:
$(".navbar-toggler").click(function () {
$("nav").addClass("fundal");
})
but also when I click again I want to remove it
Use the JQuery's toggleClass() method:
$(".navbar-toggler").click(function () {
$("nav").toggleClass("fundal");
})
I guess this code does not work, because at DOM load jQuery caches its objects and bind the functions to them?
$('span.button.slide_out').on('click', function () {
$(this).toggleClass('slide_out').toggleClass('slide_in');
$('#testbox').slideDown();
});
$('span.button.slide_in').on('click', function () {
$(this).toggleClass('slide_out').toggleClass('slide_in');
$('#testbox').slideUp();
});
I know I could write this easily with slideToggle or something else, but I have to fire different actions on every first and every second click. How can I achieve this using the same selector (instead of creating two different selectors)?
JS FIDDLE
The binding is indeed done on DOM creation, but that doesn't have to be a problem in this case, it also means that the button is still clicked if it no longer has the slide_out class. Therefore you can reuse the same click event and check the current state to choose whether to slide up or down. For example:
$('.slide_out').on('click', function () {
if($(this).toggleClass('slide_out slide_in').hasClass('slide_in'))
$('#testbox').slideDown();
else
$('#testbox').slideUp();
});
Fiddle
You could use the solution from Event binding on dynamically created elements?, as suggested by https://stackoverflow.com/users/502381/juhana:
HTML:
<span class="button_container"><span class="button slide_out">Click me</span></span>
<div id="testbox">Whohoohoooo, I am slidiiing!<br><br><small>Hey… wait! Why I am not sliding up again?</small></div>
JS:
$('.button_container').on('click', '.slide_out', function () {
$(this).toggleClass('slide_out').toggleClass('slide_in');
$('#testbox').slideDown();
});
$('.button_container').on('click', '.slide_in', function () {
$(this).toggleClass('slide_out').toggleClass('slide_in');
$('#testbox').slideUp();
});
http://jsfiddle.net/ag3cpcfb/
But, in my opinion it would be better to make your code simpler by using slideToggle() and adjust your css classes:
HTML:
<span class="button">Click me</span>
<div id="testbox">Whohoohoooo, I am slidiiing!<br><br><small>Hey… wait! Why I am not sliding up again?</small></div>
JS:
$('.button').on('click', function () {
var $testbox = $('#testbox');
if ($testbox.is(':visible')) {
console.log('Click 1');
} else {
console.log('Click 2');
}
$(this).toggleClass('slide_in');
$testbox.slideToggle();
});
http://jsfiddle.net/k77ferjh/
But this fires "Click 1" all of the time if you repeatedly click on the button. If this is not an issue, fine, if it is, you can also use a number to keep track of your clicks:
JS:
var clicks = 0;
$('.button').on('click', function () {
clicks++;
if (clicks % 2 == 0) {
console.log('Slide out');
} else {
console.log('Slide in');
}
$(this).toggleClass('slide_in');
$('#testbox').slideToggle();
});
http://jsfiddle.net/k77ferjh/1/
What I am trying to do is check if a class is active with hasClass. If it is active and then the wrapper is clicked remove that class from the wrapper again.
This is what I have to remove the class:
$(function() {
$('.toggle-nav').click(function() {
// Calling a function in case you want to expand upon this.
toggleNav();
$('#site-wrapper.show-nav').click(function (){
$(this).removeClass('show-nav');
});
console.log('it worked');
});
});
But this code is removing the class as soon as it is clicked without checking "if" it is present. Even if it is not present, it removes it.
The
Have the if statement within the click function
$('#site-wrapper').click(function (){
if ($('#site-wrapper').hasClass('show-nav')) {
$('#site-wrapper').removeClass('show-nav');
}
})
Try this:
$('#site-wrapper').click(function () {
if ($(this).hasClass('show-nav')) {
$(this).removeClass('show-nav');
} else {
$(this).addClass('show-nav');
}
});
JSFiddle Demo
$('#site-wrapper.show-nav').click(function (){
$(this).removeClass('show-nav');
});
I have a box with a checkbox, I want to insert in jQuery if the checkbox is checked toggle the class on the box with a transition, but it fails and below is the code:
$(document).ready(function(){
if ($('.onoffcheck').is(':checked')) {
$(".panel-success").toggleClass("panel-off2");
} else {
$(".panel-off").toggleClass("panel-success");
}
});
JSFIDDLE
Try
$(document).ready(function () {
$('.onoffcheck').change(function () {
$("#node2").toggleClass("panel-off2", this.checked).toggleClass("panel-success", !this.checked);
}).change()
});
Demo: Fiddle
First make sure to include the jQuery library.
Then you have to listen to the checkbox change event. Otherwise the conditional check gets only executed on document ready.
E.g.:
$(document).ready(function(){
$('.onoffcheck').on('change', function(){
if ($(this).is(':checked')) {
$(".panel-success").toggleClass("panel-off2");
} else {
$(".panel-off").toggleClass("panel-success");
}
});
});
DEMO
You have to add a change listener to make the toggle logic execute on every checked change. See working example
var toggle = function () {
if ($('.onoffcheck').is(':checked')) {
$(".panel-success").toggleClass("panel-off2");
} else {
$(".panel-off").toggleClass("panel-success");
}
};
$(document).ready(function () {
toggle(); // initial execution
$('.onoffcheck').on('change', toggle); // execute it on every change
});
Hiii, I am having problem with a code.
here is my structure, I have class structure as follows :
.box-slide-query
---.new-query-blocks
---.query-blocks
---.query-blocks
---.query-blocks
I need on click of .new-query-blocks class, i should get the count of number of .query-blocks. I am able to get the value but it is working when i click 2 times(On second click it update the value in attr "answerCount").
here's my code :
$('html').on('click', '.new-query-blocks', function () {
$('.query-result').each(function () {
($('.box-slide-query')).attr('answerCount', $('.new-question-row', $(this)).length);
});
});
Try this:
$('html').on('click', '.new-query-blocks', function () {
$('html').find('.query-result').each(function () {
($('.box-slide-query')).attr('answerCount', $('.new-question-row', $(this)).length);
});
});