Bootstrap collapse has a jumpy transition

Its happening because of max-height of navbar-collapse class which is 340px use below code to handle it. http://codepen.io/rahulchaturvedie/pen/VjVOLa

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: none;
}

The issue is caused by the padding of the container you are collapsing. It complicates the calculation of the height by collapse.js

Example:

HTML

    <div class="collapsible-div padding-values">
      // YOUR CONTENT
    </div>

CSS

.padding-values{
   padding: 20px 40px 30px;
}

this will be fixed if you move the padding to an inner container:

HTML

<div class="collapsible-div">
  <div class="new-container padding-values">
    // YOUR CONTENT
  </div>
</div>