<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-primary">+ 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" class="btn btn-info">+ subtitle </a>
<input type="text" class="form-control collapse" id="collapseTwo">
</div>Run Code Online (Sandbox Code Playgroud)
问题是当单击addInfo选项卡时,您可以在扩展中找到跳转text_area,即动画不平滑.
我一直在努力用twitter bootstrap手风琴来实现这个目标:

通常,使用手风琴(bootstraps collapse plugin)不是必须的.
我想要达到的目的是:
真的很想得到一些帮助,因为我觉得我对此失去了理智:(
使用额外的jQuery插件(如jQuery UI)是"允许的".