Bootstrap 3 smooth accordion transitions

Question

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?

HTML

    <div class="panel" id="<?php echo $id; ?>">
        <div class="panel-title"><?php the_title(); ?></div>
        <div id="collapse-<?php echo $id; ?>" class="panel-collapse collapse" style="overflow:hidden; display: block;">
            <div class="panel-body"><?php the_content(); ?></div>
        </div>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $id; ?>" class="collapsed read_more" id="btn-collapse-<?php echo $id; ?>">Read More &raquo;</a>
    </div>

JS

$('.panel-collapse').on('shown.bs.collapse', function () {
    var collapse_id = $( this ).attr("id");
    $(".panel > #btn-"+collapse_id).text("Close");
});

$('.panel-collapse').on('hidden.bs.collapse', function () {
    var collapse_id = $( this ).attr("id");
    $(".panel > #btn-"+collapse_id).text("Read More");
});

I did follow everything as on official site.

What I have tried:

This tranisiton CSS on collapsing Class

.panel .collapsing{
    height: 100px !important;
    -moz-transition : height 5s;
    -webkit-transition : height 5s;
    -o-transition : height 5s;
    transition : height 5s; 
}

Answer 1

Jumping slide effects are often caused by ambiguous height calculations. Try putting a height on .panel-body, even if it's 100%.

If that doesn't work, give it an explicit width.

Answer 2

Just updating transition should work

.collapsing {
    transition: height 0.6s;
}