Bootstrap: Remove animation from transition.js

Question

I am using twitter bootstrap and the transition.js plugin to make a collapse like described here.

http://getbootstrap.com/javascript/#collapse

I have two problems with it:

How can i remove the animation from the effect? it should instantly open and close.
How can i give the open panel a different background color?

you want the background color on the body or the heading of the panel? — omma2289, Sep 10 '13 at 16:27

score 3 · Accepted Answer · answered Sep 10 '13 at 16:42

To remove the animation effect you need to override the .collapsing class, add this to your CSS:

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

Now, to style the active panel you'd need to implement some jQuery code to add a custom class when a panel is shown since by default only the panel-body container is marked with the in class, and you wouldn't be able to target the heading with that. Something like this should work:

$('#accordion').on('show.bs.collapse','.panel-collapse',function(e){
    $(this).closest('.panel').addClass('active').siblings('.panel').removeClass('active');
});

Then you can add your CSS rules as:

#accordion .active .panel-heading{
    background: darkgrey;
}

#accordion .active .panel-body{
    background: #ccc;
}

Here's a working demo

*Note: don't forget to add the "active" class to the pane that is open by default (if any)

Bootstrap: Remove animation from transition.js

1 Answers1