title: Bootstrap 3 smooth accordion transitions
body: <p>I' am using a Bootstrap 3 accordion. Everything works fine except the transition is not smooth. It's like jumping transitions. How can I have a smooth transition?</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div class="panel" id="&lt;?php echo $id; ?&gt;"&gt;
          &lt;div class="panel-title"&gt;&lt;?php the_title(); ?&gt;&lt;/div&gt;
          &lt;div id="collapse-&lt;?php echo $id; ?&gt;" class="panel-collapse collapse" style="overflow:hidden; display: block;"&gt;
              &lt;div class="panel-body"&gt;&lt;?php the_content(); ?&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapse-&lt;?php echo $id; ?&gt;" class="collapsed read_more" id="btn-collapse-&lt;?php echo $id; ?&gt;"&gt;Read More &amp;raquo;&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('.panel-collapse').on('shown.bs.collapse', function () {
      var collapse_id = $( this ).attr("id");
      $(".panel &gt; #btn-"+collapse_id).text("Close");
  });
  
  $('.panel-collapse').on('hidden.bs.collapse', function () {
      var collapse_id = $( this ).attr("id");
      $(".panel &gt; #btn-"+collapse_id).text("Read More");
  });
  </code></pre>
  
  <p>I did follow everything as on <a href="http://getbootstrap.com/javascript/#collapse" rel="nofollow noreferrer">official site</a>.</p>
  
  <p>What I have tried:</p>
  
  <p>This tranisiton CSS on collapsing Class</p>
  
  <pre><code>.panel .collapsing{
      height: 100px !important;
      -moz-transition : height 5s;
      -webkit-transition : height 5s;
      -o-transition : height 5s;
      transition : height 5s; 
  }
  </code></pre>