Menu
<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>The problem is when clicking the addInfo tab, you could find a jump in expanding the text_area, namely, the animation is not smooth.
681
In bootstrap context wise, accordion is basically a collapse button with a lot of smaller info in it. Bootstrap use card to make an accordion. on line 1, <div id="accordion" role="tablist"> , this is where the data-parent refers to. on line 2 <div class="card"> , we are using a card class, to show the card effect.
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
To create an accordion that is collapsed by default, we need to set the 'active' property of the jQuery Accordion as false. Syntax: $("#demoAccordion"). accordion({ collapsible: true, active: false});
How it works. The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it's current value to 0 .
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.
<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> <div id="collapseOne" class="collapse"> <textarea class="form-control" rows="4"></textarea> </div> </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>Jerking happens when the parent div ".collapse" has padding.
Padding goes on the child div, not the parent. jQuery is animating the height, not the padding.
Example:
<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" style="padding: 0;"> <textarea class="form-control" rows="4" style="padding: 20px;"></textarea> </div> </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> Fiddle Showing Both
Hope this helps.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With