CODEWITHSUNDEEP
javascriptjquerycssbootstrap-4
Felix Dombek
Felix Dombek

Reputation: 14372

Make Bootstrap collapse animation optional

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.

Upvotes: 1

Views: 610

Answers (1)

lit
lit

Reputation: 460

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>

Upvotes: 2

Related Questions