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

Answer 1

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..

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