jQuery toggle not working and disappear elements

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!

Answer 1

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

Answer 2

we can also use jQuery on function

$(".espacio").on('click',function() {
    $(this).toggleClass('off on');
});

Answer 3

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.