CODEWITHSUNDEEP
jquerycssjquery-animate
Seong Lee
Seong Lee

Reputation: 10580

Height toggle animation with jQuery

I'm just preparing some simple demo for work and I'm stuck with the height toggle animation with jQuery.

$('a.content-toggle').click(function() {
    var toggleHeight = $("#panel_1").height() == 500 ? "200px" : "500px";
    $("#panel_1").animate({ height: toggleHeight }); 
});

I understand toggle function is deprecated so I'm using click to simulate the toggle.

I can get the panel to grow to 500px if I set 200px in CSS but shrinking back to 200px is not working.

This is my JS Fiddle It's ... in the first panel that triggers toggle

Upvotes: 0

Views: 917

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388436

The problem is the box sizing, which is by default content-box so the height property will exclude the padding and border, so toggleHeight will return 466 not 500

var toggleHeight = $("#panel_1").outerHeight() == 500 ? "200px" : "500px";

Demo: Fiddle

Upvotes: 3

Related Questions