Bootstrap collapse animation not smooth

Question

x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 css bootstrap min css  rel  stylesheet    gt  x000D   lt div class  form-group  gt  x000D       lt a for  collapseOne  data-toggle  collapse  href   collapseOne  aria-expanded  true  aria-controls  collapseOne  class  btn btn-primary  gt   addInfo  lt  a gt  x000D       lt textarea class  form-control collapse  id  collapseOne  rows  4  gt  lt  textarea gt  x000D   lt  div gt  x000D   x000D   lt div class  form-group  gt  x000D       lt a for  collapseTwo  data-toggle  collapse  href   collapseTwo  aria-expanded  true  aria-controls  collapseOne  class  btn btn-info  gt   subtitle  lt  a gt  x000D       lt input type  text  class  form-control collapse  id  collapseTwo  gt  x000D   lt  div gt  x000D   x000D   x000D    The problem is when clicking the addInfo tab  you could find a jump in expanding the text area  namely  the animation is not smooth

User · Answer

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    lt div class  form-group  gt       lt a for  collapseOne  data-toggle  collapse  href   collapseOne  aria-expanded  true  aria-controls  collapseOne  gt   Not Jerky lt  a gt       lt div class  collapse  id  collapseOne  style  padding  0   gt           lt textarea class  form-control  rows  4  style  padding  20px   gt No padding on animated element  Padding on child  lt  textarea gt       lt  div gt   lt  div gt    Fiddle

User · Answer

For others like me who had a different but similar issue where the animation was not occurring at all   From what I could find it may be something in my browser setting which preferred less motion for accessibility purposes  I could not find any setting in my browser  but I was able to get the animation working by downloading a local copy of bootstrap and commenting out this section of the CSS file    media  prefers-reduced-motion  reduce       collapsing       -webkit-transition  none      transition  none

User · Answer

Padding around the collapsing div must be 0

User · Answer

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    lt div class  form-group  gt       lt a for  collapseJerky  data-toggle  collapse  href   collapseJerky  aria-expanded  true  aria-controls  collapseJerky  gt   Jerky lt  a gt       lt div class  collapse  id  collapseJerky  style  margin 0  padding  0   gt           lt textarea class  form-control  rows  4  style  margin-bottom  20px   gt No margin or padding on animated element  Margin on child  lt  textarea gt       lt  div gt   lt  div gt   lt div class  form-group  gt       lt a data-toggle  collapse  href   collapseNotJerky  aria-expanded  true  aria-controls  collapseNotJerky  gt   Not Jerky lt  a gt       lt div class  collapse  id  collapseNotJerky  style  margin 0 padding  0   gt           lt textarea class  form-control  rows  4  style  margin-bottom  0   gt No margin or padding on animated element or on child  lt  textarea gt       lt  div gt   lt  div gt   lt p gt      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   lt  p gt    Fiddle

User · Answer

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       lt div class  form-group  gt          lt a for  collapseOne  data-toggle  collapse  href   collapseOne  aria-expanded  true  aria-controls  collapseOne  gt   addInfo lt  a gt          lt div class  collapse  id  collapseOne  style  padding  0   gt             lt textarea class  form-control  rows  4  style  padding  20px   gt  lt  textarea gt          lt  div gt     lt  div gt      lt div class  form-group  gt       lt a for  collapseTwo  data-toggle  collapse  href   collapseTwo  aria-expanded  true  aria-controls  collapseOne  gt   subtitle lt  a gt       lt input type  text  class  form-control collapse  id  collapseTwo  gt     lt  div gt    Fiddle Showing Both  Hope this helps

User · Answer

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

User · 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    x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   lt div class  form-group  gt  x000D       lt a for  collapseOne  data-toggle  collapse  href   collapseOne  aria-expanded  true  aria-controls  collapseOne  class  btn btn-primary  gt   addInfo lt  a gt  x000D       lt div id  collapseOne  class  collapse  gt  x000D           lt textarea class  form-control  rows  4  gt  lt  textarea gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  form-group  gt  x000D       lt a for  collapseTwo  data-toggle  collapse  href   collapseTwo  aria-expanded  true  aria-controls  collapseOne  class  btn btn-info  gt   subtitle lt  a gt  x000D       lt input type  text  class  form-control collapse  id  collapseTwo  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Although this has been answer https   stackoverflow com a 28375912 5413283  and regarding padding it is not mentioned in the original answer but here https   stackoverflow com a 33697157 5413283  i am just adding here for visual presentation and a cleaner code  Tested on Bootstrap 4   Create a new parent div and add the bootstrap collapse  Remove the classes from the textarea  lt div class  quot collapse quot  id  quot collapseOne quot  gt   lt  -- bootstrap class on parent -- gt       lt textarea class  quot form-control quot  rows  quot 4 quot  gt  lt  textarea gt   lt  div gt   lt  --    bootstrap class on parent -- gt   If you want to have spaces around  wrap textarea with padding  Do not add margin  it has the same issue   lt div class  quot collapse quot  id  quot collapseOne quot  gt   lt  -- bootstrap class on parent -- gt       lt div class  quot py-4 quot  gt   lt  -- padding for textarea -- gt           lt textarea class  quot form-control quot  rows  quot 4 quot  gt  lt  textarea gt       lt  div gt   lt  --    padding for textarea -- gt   lt  div gt   lt  --    bootstrap class on parent -- gt   Tested on Bootstrap 3   Same as bootstrap 4  Wrap the textare with collapse class   lt div class  quot collapse quot  id  quot collapseOne quot  gt   lt  -- bootstrap class on parent -- gt       lt textarea class  quot form-control quot  rows  quot 4 quot  gt  lt  textarea gt   lt  div gt   lt  --    bootstrap class on parent -- gt   And for padding Bootstrap 3 does not have p-  classes like Bootstrap 4   So you need to create your own  Do not use padding it will not work  use margin   collapseOne textarea       margin  10px 0 10px 0

User · Answer

Mine got smoother not by wrapping each child but wrapping whole markup with a helper div  Like this    lt div class  accordeonBigWrapper  gt       lt div class  panel-group accordion partnersAccordeonWrapper  id  partnersAccordeon  role  tablist  aria-multiselectable  false  gt           accordeon markup inside         lt  div gt   lt  div gt

[jquery] Bootstrap collapse animation not smooth

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3