Fix Bootstrap Collapse Jerking

Jerking happens when the parent div ".collapse" has padding. Padding goes on the child div, not the parent. jQuery is animating the height, not the padding.

by CR Rollyson

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="form-group"> <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">+ Not Jerky</a>

    <div class="collapse" id="collapseOne" style="padding: 0;">
        <textarea class="form-control" rows="4" style="padding: 20px;">No padding on animated element. Padding on child.</textarea>
    </div>
</div>
<div class="form-group"> <a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">+ Jerky</a>

    <textarea type="text" class="form-control collapse" id="collapseTwo" rows="4" style="padding: 20px;">Padding on animated element</textarea>
</div>

CSS

/* Not needed, for display only */
body {
  background: #20262E;
  color: #141519;
  font-family: 'Helvetica';
  font-size: 16px;
  line-height: 21px;
  padding: 1em;
}


/* Not needed, for display only */
a {
  color: #2e71ff;
    display: block;
    background: #eee;
    font-weight: bold;
    padding: .5em;
}

/* Not needed, for display only */
textarea.form-control {
    height: 5em;
}

JavaScript

/* CSS in example is Not needed, for display only */