Make Bootstrap collapse animation optional

Question

I would like to let a user or an admin for my site select whether Bootstrap 4 collapse elements should be animated. The reason is that the animation gets unsmooth if many elements are moved by the animation, so it is better to turn it off when users work with large amounts of elements on a page.

The (static) CSS to turn it off is (from this answer)

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

However, how can I enable/disable this css at runtime?

Note that the collapsing class is set by Bootstrap automatically; AFAIK I have no control over which elements have this class and which don't.

Can you add and remove the .collapsing css parameters dynamically with jquery? — lit, Jul 21 '17 at 20:51
Pending on what language you are using on the back end. You could hypothetically pass the Boolean variable via ajax or directly into the template and print the inline css to disable the animation. — lit, Jul 21 '17 at 20:59
Hm, this is not a server setting. I read options from a settings.js file which just contains a JSON object. This file is just the first js file that my HTML links to. — Felix Dombek, Jul 21 '17 at 21:00
That ruleset if applied correctly will actually remove the `element.collapsing` with the `display:none`. — zer00ne, Jul 21 '17 at 21:01
When loading the json object, you can check the value of the condition and choose to add the attributes to disable the effect or not. — lit, Jul 21 '17 at 21:03
I think bootstrap only sets this attribute during the animation. I don't set it manually at all. — Felix Dombek, Jul 21 '17 at 21:29
I agree with you, there is a default setting. That you want to override with the css code above. — lit, Jul 21 '17 at 21:37

score 2 · Accepted Answer · answered Jul 22 '17 at 04:04

I used toggleClass() to add and remove the collapse-anim-off class.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .collapse-anim-off {
   -webkit-transition: none;
   transition: none;
  display: none;
  }
  </style>
  <script>
 $(document).ready(function(){
     $("#collapse-anim").click(function(){
         $("#demo").toggleClass("collapse-anim-off");
     });
 });
</script>
</head>
<body>

<div class="container">
  <h2>Simple Collapsible</h2>
  <button type="button" class="btn btn-info" id="collapse-anim">Collapse Animation</button>
  <br>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    fsldfjslkfjsldkfjsldjflsflsdkjflksdjflksjdflksdf.sklfjsldkjflsdjflsjflksdjflsjflsjdf
    flksdfskfjsldkfjslfjslfjsdlkfjsdlfjsdlfjslfjsldkfjsldfjsldkfjlsdjflsdjflsjfslkdfjsd
    fsfsjdlfjsdfjlsdfsdfsfsdfsfsfsdfsdfsdfsdfsdfsdfsdfsdfsfsdfsdfsdfsdfsdfsdfsdfsdfsfsdfs
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    fsldfjslkfjsldkfjsldjflsflsdkjflksdjflksjdflksdf.sklfjsldkjflsdjflsjflksdjflsjflsjdf
    flksdfskfjsldkfjslfjslfjsdlkfjsdlfjsdlfjslfjsldkfjsldfjsldkfjlsdjflsdjflsjfslkdfjsd
    fsfsjdlfjsdfjlsdfsdfsfsdfsfsfsdfsdfsdfsdfsdfsdfsdfsdfsfsdfsdfsdfsdfsdfsdfsdfsdfsfsdfsLorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    fsldfjslkfjsldkfjsldjflsflsdkjflksdjflksjdflksdf.sklfjsldkjflsdjflsjflksdjflsjflsjdf
    flksdfskfjsldkfjslfjslfjsdlkfjsdlfjsdlfjslfjsldkfjsldfjsldkfjlsdjflsdjflsjfslkdfjsd
    fsfsjdlfjsdfjlsdfsdfsfsdfsfsfsdfsdfsdfsdfsdfsdfsdfsdfsfsdfsdfsdfsdfsdfsdfsdfsdfsfsdfs
  </div>
</div>

</body>
</html>

Make Bootstrap collapse animation optional

1 Answers1