Disable bootstrap Minimize / close animation

Question

Any trick to disable Collapse group opening / closing animation?

Answer 1

For Bootstrap 3 and 4, this is

.collapsing { -webkit-transition: none; transition: none; display: none; } 

Answer 2

Bootstrap 2 CSS solution:

 .collapse { transition: height 0.01s; } 

NB : setting transition: none disables the collapse function.

---

Bootstrap 4 solution:

 .collapsing { transition: none !important; } 

Answer 3

If you find the 1px jump before the extension and after minimizing using the CSS solution a little annoying, here is 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'); }) ); 

Answer 4

It may not be a direct answer to the question, but a recent addition to the official documentation describes how jQuery can be used to turn off transitions completely simply:

 $.support.transition = false 

---

Setting the transition .collapsing CSS to none as indicated in the accepted answer removed the animation. But this - in Firefox and Chromium for me - creates an unwanted visual problem when the browser crashes.

For example, visit the navbar download example and add CSS from the accepted answer:

 .collapsing { -webkit-transition: none; transition: none; } 

What I see at the moment is when the navigation bar collapses, the bottom border of the navbar instantly becomes two pixels instead of one, and then confuses back. Using jQuery, this artifact does not appear.