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

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 2

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 3

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