Bootstrap Collapse on a Panel, padding causes "jump"
<p>I'm applying the collapse behavior to a panel element and it does work but because of the padding applied to <code>.panel-body</code>, the animation stops at the padding and then instantly snaps to height. You can see this happening on the most basic example in codepen: <a href="http://codepen.io/FiveSixTwo/pen/NRQLPo" rel="nofollow noreferrer">http://codepen.io/FiveSixTwo/pen/NRQLPo</a></p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading" role="button" data-target="#test" data-toggle="collapse"&gt;Test Heading&lt;span class="btn-collapse-header glyphicons glyphicons-chevron-up"&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div id="test" class="panel-body collapse in" aria-expanded="true"&gt;
      &lt;p&gt;Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce
        non varius purus aenean nec magna felis fusce vestibulum.&lt;/p&gt;
      &lt;p&gt;Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce
        non varius purus aenean nec magna felis fusce vestibulum.&lt;/p&gt;
      &lt;p&gt;Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce
        non varius purus aenean nec magna felis fusce vestibulum.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Semi solution:</p>

<pre><code>.panel-body {
  padding: 0;
  p {
    padding: 15px 15px 0;
    &amp;:last-of-type { padding-bottom: 15px; }
  }
}
</code></pre>

<p>This is a 'semi-solution' because it's not going to work across my entire app without a lot of additional CSS to override the default padding and not break the layout.</p>

<p>Ideally, I want to keep the padding on the <code>.panel-body</code> and have the collapse animation play smoothly without a jarring height change at the beginning and end of the animation.</p>

<p>I commented out the solution CSS in my pen so you can see the issue.</p>

<p>I guess the easiest thing to do is to put everything inside another div with padding on it but that's not much better than the semi-solution. I'd prefer a global CSS or even JS solution but so far I haven't come up with anything.</p>

<p>Bootstrap is fine for some things but the more I use it, and the bigger my app gets, the more I hate it.</p>