Bootstrap collapse animation not smooth

bootstrap collapse bug
bootstrap collapse height issue
bootstrap accordion collapse issue
bootstrap 3 navbar-collapse animation
bootstrap collapse panel with icon
ngb-accordion animation
bootstrap accordion rotate icon
bootstrap collapse table row animation

<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>

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>

Bootstrap collapse animation not smooth, Bootstrap collapse animation not smooth. Posted by: admin Jerking happens when the parent div “.collapse” has padding. Padding goes on  Do not set a height on the .collapse tag. It affects the animation, if the height is overridden with css; it will not animate correctly.

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.

Accordion Expand Collapse isn't smooth, Hi,I have implemented the collapse feature but although its smooth on your example and I can't get my version to be the same smooth transition.Do you have​  Make the collapse also a Bootstrap row. Not only should columns always be in a row, it will make the collapsing transition more apparent.

Adding to @CR Rollyson answer,

In case if you have a collapsible div which has a min-height attribute, it will also cause the jerking. Try removing that attribute from directly collapsible div. Use it in the child div of the collapsible div.

<div class="form-group">
    <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">+ Not Jerky</a>
    <div class="collapse" id="collapseOne" style="padding: 0;">
        <textarea class="form-control" rows="4" style="padding: 20px;">No padding on animated element. Padding on child.</textarea>
    </div>
</div>

Fiddle

Collapse has a jumpy transition when the collapsing element has , Tested on OSX Mavericks Chrome Version 31.0.1650.63 Firefox 26.0 Reduced test case: http://jsfiddle.net/q8D56/1/ The obvious workaround is  I'm running into an issue with angular-bootstrap collapse directive and CSS. Basically when you add the directive "collapse" to a div it works fine. But when you try to expand/collapse a table row it seems to have some issues with the transition effect.

I think there can be several situations that cause the jerking. In my example, the issue deals with bottom margin on the non-animated child (even though the animated parent has no margin / padding). When removing the margin, the animation becomes smooth.

<div class="form-group">
    <a for="collapseJerky" data-toggle="collapse" href="#collapseJerky" aria-expanded="true" aria-controls="collapseJerky">+ Jerky</a>
    <div class="collapse" id="collapseJerky" style="margin:0; padding: 0;">
        <textarea class="form-control" rows="4" style="margin-bottom: 20px;">No margin or padding on animated element. Margin on child.</textarea>
    </div>
</div>
<div class="form-group">
    <a data-toggle="collapse" href="#collapseNotJerky" aria-expanded="true" aria-controls="collapseNotJerky">+ Not Jerky</a>
    <div class="collapse" id="collapseNotJerky" style="margin:0 padding: 0;">
        <textarea class="form-control" rows="4" style="margin-bottom: 0;">No margin or padding on animated element or on child.</textarea>
    </div>
</div>
<p>
    Moles and trolls, moles and trolls, work, work, work, work, work. We never see the light of day. This is just content below the "Not Jerky" to show that the animation is smooth.
</p>

Fiddle

ui.bootstrap.collapse animation jumps when padding is added to , When using the collapse directive on an element that has padding on it, the animation is not smooth but jumps the remaining padded pixels. I got what I'm looking for but the animation effect isn't smooth as it should. Smooth Animation for Bootstrap 4 collapse. the bootstrap style of .collapse and

Mine got smoother not by wrapping each child but wrapping whole markup with a helper div. Like this:

<div class="accordeonBigWrapper">
    <div class="panel-group accordion partnersAccordeonWrapper" id="partnersAccordeon" role="tablist" aria-multiselectable="false">
         accordeon markup inside...
    </div>
</div>

Animate a open and closing element using bootstrap's collapse., So this bootstrap has a collapse plugin. It can open and close an element. But now i want a menu, item, panel, card, page, list, etc… open and close using some​  The bootstrap 4 collapsible navbar doesn't contain a smooth closing animation as you can see in the link. The opening animation is just fine, but the closing animation doesn't exist. The opening animation is just fine, but the closing animation doesn't exist.

Collapse · Bootstrap, Collapse. Toggle the visibility of content across your project with a few classes If the control element's HTML element is not a button (e.g., an <a> or <div> ), the .collapsing is added when the transition starts, and removed when it finishes. Setting the .collapsing CSS transitions to none as mentioned in the accepted answer removed the animation. But this — in Firefox and Chromium for me — creates an unwanted visual issue on collapse of the navbar. For instance, visit the Bootstrap navbar example and add the CSS from the accepted answer:

Bootstrap 4 navbar collapse not sliding smoothly., jQuery slideToggle(); bootstrap 3 not smooth animation </head> <body> <a class="menu-bar" data-toggle="collapse" href="#menu"> <img  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?

jQuery slideToggle(); bootstrap 3 not smooth animation, The height is being increased/decreased via JS animation, you can calculate the paddingTop and paddingBottom values and increase/decrease those with the height. This is a very, very annoying bug. Copy link Quote reply

Comments
  • It is, but once it gets to its min size of 1 line, the element is removes from screen.
  • Bootstrap alpha 4 answer here: you need that <div class="clearfix"> to wrap your nav or it gets janky.
  • @suzumakes the div with clearfix should wrap which nav? I see no nav on his code!
  • Perfect fix! Thank you!
  • Wrapping everything being collapsed inside a div also did it for my table!
  • thanks ! the fix is working, however, is there anyway to use it in a table with a 'tr' without having to wrap all the content in a div ?
  • I've never tried, but the answer here (stackoverflow.com/a/30081737/1483190) suggests that a wrapper div might be required for each row. However, you could consider using jQuery's Wrap function (api.jquery.com/wrap) to automatically wrap each <tr> in a <div> with the appropriate class when the page loads.
  • Also fixed the problem of conflicting "d-lg-block" and "collapse"
  • great answer that works and a fiddle to boot that clearly demonstrates the solution working. Kudos to the poster!
  • This is what I was looking for. Thanks for explaining the role of the jquery.
  • Glad it helped √√ @RachelS
  • Or in my case it was height. Lesson here is to don't do any styling to collapse, wrap the content instead.
  • This should be mentioned in the document.
  • Yep, if min-height needs to be set for whatever reason, it should go on the textarea. Updated your fiddle version just to show it working smoothly for anyone checking it out: jsfiddle.net/uhjp14aq/3