Since .toggle() event is deprecated as of version 1.8
and removed in version 1.9
, you can use .click() with .toggleClass() instead:
$(".espacio").click(function() {
$(this).toggleClass('on off');
});
Question
When I add this on my sites, all div disappear. What could happen? What is wrong with the jquery code?
Jquery:
$( ".espacio" ).toggle(function() {
$(this).removeClass("off").addClass("on");
}, function() {
$(this).removeClass("on").addClass("off");
});
CSS:
.off {height:200px}
.on {height:400px}
Any help would be great!
Solution
Since .toggle() event is deprecated as of version 1.8
and removed in version 1.9
, you can use .click() with .toggleClass() instead:
$(".espacio").click(function() {
$(this).toggleClass('on off');
});
OTHER TIPS
we can also use jQuery on function
$(".espacio").on('click',function() {
$(this).toggleClass('off on');
});
If you want to use jQuery UI you can use switchclass and add easing, animations. Something like
$( ".espacio" ).click(function() {
$(this)switchClass("off", "on", 1000, "easeInOutQuad");
},
function() {
$(this).switchClass("on", "off", 1000, "easeInOutQuad");
});
Check out jquery UI .switchClass here.