disable Bootstrap's Collapse open/close animation

JavascriptAnimationTwitter Bootstrap

Javascript Problem Overview

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

Javascript Solutions

Solution 1 - Javascript

For Bootstrap 3 and 4 it's

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

Solution 2 - Javascript

Bootstrap 2 CSS solution:
.collapse {  transition: height 0.01s; }

NB: setting transition: none disables the collapse functionnality.

Bootstrap 4 solution:
.collapsing {
  transition: none !important;
}

Solution 3 - Javascript

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');
    })
);

Solution 4 - Javascript

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.

Categories
Recommended Javascript Solutions
Recommended Animation Solutions
Recommended Twitter Bootstrap Solutions

Previous Solution:

Immutable bitmap crash error

AndroidBitmap

Next Solution:

Closing HTML <input> tag issue

HtmlTags

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionyounes0View Question on Stackoverflow
Solution 1 - JavascriptVassilisView Answer on Stackoverflow
Solution 2 - Javascriptyounes0View Answer on Stackoverflow
Solution 3 - JavascriptslightlyfaultyView Answer on Stackoverflow
Solution 4 - JavascriptSteven MaudeView Answer on Stackoverflow