javascript - Choppy animation bootstrap -

i use bootstrap collapse class on html elements. then, jquery, dynamically show collapsed elements. example of this:(html:)

<form>     <div class="checkbox">         <label><input type="checkbox" id="1">checkbox1</label>     </div>     <div class="sub_level collapse">         <div class="checkbox">             <label><input type="checkbox" id="2">checkbox2</label>         </div>         <div class="checkbox">             <label><input type="checkbox" id="3">checkbox3</label>         </div>         <div class="checkbox">             <label><input type="checkbox" id="4">checkbox4</label>         </div>     </div> </form> 

(javascript:)

$(document).ready(function(){      $("#1").click(function(){         $("div.sub_level").collapse("toggle");     });  }); 

here jsfiddle: https://jsfiddle.net/dtchh/10346/

reading issue i've read it's padding causes problem. removing padding fixes don't want remove padding. also, wrapping collapsing element in div fixes problem doesn't. wondering if there core reason problem can fix. tried using jquery show/hide , using style='display:none;' instead of bootstrap collapse class it's same problem. doesn't seems logical can't use such simple animation method.

thank you.

here's how jquery you're not dependent on bootstrap collapse.

$('#checkchange').click(function() {    this.checked ? $('#opened').fadein(300) : $('#opened').fadeout(100);  });

.wrapper {    padding: 25px 0;  }  #opened {    display: none;    background: #f5f5f5;    padding: 10px 15px;    margin: 10px 0px;  }  #checkit .form-control {    border-radius: 0px;    height: 50px;  }  input[type=checkbox] + label {    color: #ccc;    font-style: italic;  }  input[type=checkbox]:checked + label {    color: #000;    font-style: normal;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />  <div class="wrapper">    <div class="container">      <div class="row">        <form name="checkit" id="checkit">          <div class="col-sm-6">            <div class="form-group">              <label for="email">email address</label>              <input type="email" class="form-control" id="email" placeholder="email" />            </div>          </div>          <div class="col-sm-6">            <div class="form-group">              <label for="password">password</label>              <input type="password" class="form-control" id="password" placeholder="password" />            </div>          </div>          <div class="col-sm-6">            <input type="checkbox" id="checkchange" />            <label for="checkchange">check out</label>            <div id="opened">              <div class="checkbox">                <label>                  <input type="checkbox" id="one" />check it</label>              </div>              <div class="checkbox">                <label>                  <input type="checkbox" id="two" />check out</label>              </div>              <div class="checkbox">                <label>                  <input type="checkbox" id="three" />check out again</label>              </div>            </div>          </div>          <div class="col-sm-6">            <div class="form-group">              <label for="name">name</label>              <input type="text" class="form-control" id="name" placeholder="name" />            </div>          </div>        </form>      </div>    </div>  </div>