disable Bootstrap s Collapse open close animation

Question

Any trick to disable the open close animation of Collapse groups

User · Answer

Bootstrap 2 CSS solution    collapse    transition  height 0 01s        NB  setting transition  none disables the collapse functionnality     Bootstrap 4 solution    collapsing     transition  none  important

User · Answer

Maybe not a direct answer to the question  but a recent addition to the official documentation describes how jQuery can be used to disable transitions entirely just by     support transition   false     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    collapsing        -webkit-transition  none       transition  none      What I currently see is when the navbar collapses  the bottom border of the navbar momentarily becomes two pixels instead of one  then disconcertingly jumps back to one  Using jQuery  this artifact doesn t appear

User · Answer

If you find the 1px jump before expanding and after collapsing when using the CSS solution a bit annoying  here s a simple JavaScript solution for Bootstrap 3     Just add this somewhere in your code     document  ready          collapse   on  show bs collapse hide bs collapse   function e            e preventDefault                    data-toggle  collapse     on  click   function e            e preventDefault                this  data  target    toggleClass  in

User · Answer

For Bootstrap 3 and 4 it s   collapsing       -webkit-transition  none      transition  none      display  none

[javascript] disable Bootstrap's Collapse open/close animation

`Bootstrap 2` CSS solution:

`Bootstrap 4` solution:

Examples related to javascript

Examples related to animation

Examples related to twitter-bootstrap