shapeare shapeare - 7 months ago 587
Javascript Question

Bootstrap collapse animation not smooth

You could access my code here http://jsfiddle.net/qba2xgh6/9/ :

The problem is when clicking the addInfo tab, you could find a jump in expanding the text_area, namely, the animation is not smooth.

<div class="form-group">
<a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">+ addInfo</a>
<textarea class="form-control collapse" id="collapseOne" rows="4"></textarea>
</div>

<div class="form-group">
<a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">+ subtitle</a>
<input type="text" class="form-control collapse" id="collapseTwo">
</div>

Answer

In case anybody else comes across this problem, as I just have, the answer is to wrap the content which you want to collapse inside a div and collapse the wrapper div rather than the content itself. I've updated the OP's fiddle to demonstrate: http://jsfiddle.net/26272tzu/. The OP's fixed code looks like this:

<div class="form-group">
    <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">+ addInfo</a>
    <div class="collapse" id="collapseOne">
        <textarea class="form-control" rows="4"></textarea>
    </div>
</div>