Twitter Bootstrap 100% height accordion “jump”

Question

I'm trying to implement a 100% height accordion using the Twitter Bootstrap collapse component, exactly as described in this question.

I'm manually setting the heights of the .accordion-inner elements as described in this answer.

However I'm experiencing "bouncy" behaviour when expanding/collapsing the panels. I have removed all padding/margin/border from the .accordion-inner elements to eliminate that possibility.

It is most noticeable in IE10, however the problem is also evident in Chrome.

See this example.

Any ideas what is causing this "jumpy" behaviour?

Answer 1

Late to the party, but:

I had a similar problem, and noticed that if I removed a margin-top from the element below the collapsing one, and replaced it with padding-top, the transition was smooth.

So - check for margins on adjacent elements, and try replacing them with padding, if possible.

Answer 2

I think the "jump" you're seeing is due to the CSS transitions for the .collapse class.

If you take a look at this SO thread Turning off Twitter Bootstrap Navbar Transition animation, you can see how to disable the transition with an overriding CSS class 'no-transition'. This doesn't stop the animation all together, but it speeds it up so that the jump is less noticeable...

Add no-transition to your accordion-body elements..

<div id="collapseOne" class="accordion-body collapse in no-transition">

Add the CSS..

.no-transition {
  -webkit-transition: height 0.001s;
  -moz-transition: height 0.001s;
  -ms-transition: height 0.001s;
  -o-transition: height 0.001s;
  transition: height 0.001s;
}

Updated plunker.. http://plnkr.co/edit/xnvDGcDd21iCu69wKSub?p=preview

Answer 3

HTML:

<td><a data-toggle="collapse" href="#text1" aria-expanded="false" aria-controls="#text1"</a>
<div class="collapse" id="text1" aria-expanded="true" style="padding-top:5px"><img src="..."></div>

CSS:

 .collapse.in{
    padding-bottom:5px;
 }

Answer 4

I was having this weird behavior where the accordion would expand to a much larger height than the actual visible content, and then collapse (jump) back to the actual visible content height.

Turns out that my accordion body for that panel had a few empty html elements, which, in my case were a few divs with col-sm-4 class and nothing inside them. Once I commented them out this jumping behavior stopped. Hope this helps someone with similar problem.