89

Any trick to disable the open/close animation of Collapse groups ?

younes0
  • 2,288
  • 1
  • 25
  • 34

4 Answers4

170

For Bootstrap 3 and 4 it's

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}
Felix Dombek
  • 13,664
  • 17
  • 79
  • 131
Vassilis
  • 2,801
  • 1
  • 20
  • 16
  • 1
    Can confirm, this works for bootstrap 3. I ended up disabling the transition as it is fairly slow on mobile devices. Not sure why. – teewuane Mar 26 '14 at 17:08
  • 6
    on mobile there still is a small deley because of this line from bootstrap.js: "Collapse.TRANSITION_DURATION = 350" change the transition duration value and the delay will be fixed. – Cristina Cristea May 12 '15 at 07:57
  • 2
    What about -moz-transition and -o-transition? – Kapitein Witbaard Oct 09 '15 at 11:29
  • 1
    I added `display: none` to avoid the last collapsing artefact. – vog Jul 06 '17 at 08:09
  • You can also add another CSS class to disable the animation on certain elements. Something like `.no-animation.collapsing {...}` in your CSS – amjoconn Jul 18 '17 at 14:39
  • 12
    while this disables the animation, as per the OP's request, it keeps the opening delay. Is it possible to reduce that delay to 0? – Sam Axe May 09 '18 at 19:51
  • Works like a charm in Bootstrap v4.1. However, how to resolve that 0.5 ms jerk for bootstrap and reactJS combination? – Krupal Patel Sep 18 '18 at 06:34
  • 1
    @SamAxe I just had the same problem, and Cristina Cristea gives the solution above. Reduce the delay value. To override the value without changing the bootstrap code, run `$.fn.collapse.Constructor.TRANSITION_DURATION = 0;` after bootstrap.js has loaded. – gnud Mar 27 '19 at 00:15
  • I suggest to put also height: auto !important; on the collapsing class, to avoid bootstrap js to force an height and give a strange bounce effect – maestroosram Jul 28 '20 at 15:11
  • And for bootstrap 5 please ? – Valentin Garreau Jun 20 '22 at 17:12
30

Bootstrap 2 CSS solution:

.collapse {  transition: height 0.01s; }

NB: setting transition: none disables the collapse functionnality.

Bootstrap 4 solution:

.collapsing {
  transition: none !important;
}
Aakash
  • 21,375
  • 7
  • 100
  • 81
younes0
  • 2,288
  • 1
  • 25
  • 34
18

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');
    })
);
Jordan Garvey
  • 345
  • 5
  • 16
slightlyfaulty
  • 1,401
  • 14
  • 13
  • 4
    For me the issue was not only with the CSS transition itself, but with the javascript that changes the height. The overall experience was lacking on mobile and using the above JS code solved it for me. – itayw Sep 02 '14 at 12:52
  • This solves my problem aswell but it prevents the navbar from closing if you click outside, (I have a click event for that).. – Reft Feb 14 '15 at 16:03
  • Awesome solution! This results in a totally smooth transition. No flickering at all. – Amit Saxena Sep 14 '16 at 05:56
  • Best Solution Yet, CSS was not working in my case. – Johann Combrink Mar 17 '17 at 14:42
13

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.

Steven Maude
  • 856
  • 11
  • 21
  • 2
    The one downside is this would disable transitions globally, which might not be desired. – Eddie Groves Sep 11 '15 at 05:18
  • 5
    Plain `$.support.transition = false` after loading `bootstrap.min.js` was not enough, but `$(function() { $.support.transition = false; })` did the trick for me. – Jukka Suomela Nov 16 '15 at 19:46