Enable the choice for Bootstrap collapse animation to be customized

Question

Enable the choice for Bootstrap collapse animation to be customized

Is there a way to allow users or admins on my website to decide whether or not Bootstrap 4 collapse elements should be animated? The concern is that when many elements are moved by the animation, it becomes less smooth. Therefore, it would be ideal to give users the option to turn off the animation, especially when working with numerous elements on a page.

The CSS code to disable the animation (as per this answer) is:

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

But how can I toggle this CSS on or off at runtime?

Keep in mind that the collapsing class is automatically assigned by Bootstrap; I have no say over which elements have this class and which do not.

javascript jquery css bootstrap-4

Answer 1

Answer №1

I utilized the toggleClass() method to effectively include and exclude 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>

Answer 2

I utilized the toggleClass() method to effectively include and exclude 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>

Enable the choice for Bootstrap collapse animation to be customized

Answer №1

Similar questions

Tips on avoiding the accumulation of event handlers when dealing with click events triggered by the document selector in jQuery

Is PHP loaded prior to the `html body`?

Adjust the dimensions of the dropdown menu

Viewing content on a mobile device and using the scrolltop

Issues with Jquery setTimeout function not functioning as expected

React Component: Issue with conditional "if else" statement not refreshing in return statement

"Learn how to retrieve and assign a value to a select2 dropdown in Vue.js

An unexpected page transition occurs when attempting to delete a link

By utilizing the body element as the container instead of a div, the content shifts to the left by eight pixels

Request Denied: Ajax communication to external origin blocked

Maximizing the use of default top positioning for absolutely positioned elements

Incorrectly colored buttons upon clicking

Encountering a Node V18 Peer Dependency Conflict错

Ant Design is incompatible with React JS projects and cannot be effectively utilized

How can PHP be utilized to dynamically add classes to <li> elements and alternate them after every third item

Please optimize this method to decrease its Cognitive Complexity from 21 to the maximum allowed limit of 15. What are some strategies for refactoring and simplifying the

Encountering a 404 error in Angular MVC project while trying to load a

Learning the Basics of CSS: Understanding the Difference Between Float and Liquid Layout

Babel had a SyntaxError in test.jsx file at line 3, position 11 with an Unexpected token

What is the best redux middleware for my needs?