Collapse has a jumpy transition when the collapsing element has padding

[ohaibbq]

Tested on OSX Mavericks

• Chrome Version 31.0.1650.63
• Firefox 26.0

Reduced test case:
http://jsfiddle.net/q8D56/1/

The obvious workaround is give the padding to a child element of the collapse target. This seems a bit silly that it's necessary, though.

[mdo]

There's no way around this because of the global box-sizing: border-box. Padding affects the height of the element, so when the collapsing element goes from whatever height it's at to height: 0, it has the padding in there. Then the display: none; kicks in and it skips out of view.

[markhalliwell]

There's no way around this because of the global box-sizing: border-box

That isn't necessarily true. Yes, the border box causes paddings to be respected, but "no way around this" isn't true.

The height is being increased/decreased via JS animation, you can calculate the paddingTop and paddingBottom values and increase/decrease those with the height.

This is a very, very annoying bug.

[econic]

putting a div around that element and collapsing that instead fixes that in most cases, but you could solve this issue really easy by just using .css( "height" ) rather than .height().
http://api.jquery.com/height/
+1 for fixing

[markhalliwell]

@mdo, can you re-open this please.

edit: @econic nifty, didn't catch that difference between .css('height') and .height(). Good to know :)

[mikeazo]

@econic Thanks for the div suggestion. I was having this issue, removed the padding from the collapse div and put a new div around my content with the padding. Works perfect.