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.

javascriptjquerycssbootstrap-4

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How do you center controls within a repeater control's item template?

I have a repeating control on my page that displays an image and a hyperlink one below the other. When I add more than one line of text, it causes the image to move up. I want the top of the images to be aligned horizontally and the text to flow downward i ...

c#asp.netcss

The date picker feature of Jquery Mobile is not appearing on the popup field

I implemented the jtsage jquery mobile date picker, and I am facing an issue where the date picker appears behind the popup instead of in front of it when the text inside the popup is clicked. Here is a snippet of my code: <div data-role="content"> ...

javascriptjqueryjquery-mobile

Tips for relocating several buttons to the upper right corner

I have a dilemma with the positioning of 10 buttons on my webpage. Specifically, I would like to place them in the top right corner, but they are currently at the bottom. Can you assist me with moving the buttons? My desired outcome can be seen here. I s ...

cssbootstrap-4bootstrap-5

Is it possible to convert ejs to jade?

I'm struggling with the conversion of this ejs code to jade: <h1>I’m planning on counting up to <%= counter %></h1> <p><% for(var i = 1 ; i <= counter ; i++) { %> <%= i %>... <% } %></ ...

javascriptnode.jsexpresspugejs

Integrating Excel into a webpage - is it possible?

Currently facing an issue on my website. I'm trying to open a 'file://' URL directly with the <a href=""> element in a browser, but it's prohibited. I'm searching for a plugin or similar solution that can enable me to execut ...

javascriptphpjqueryajaxexcel

Utilizing the Public Directory in Vite Compilation

One issue I encountered in my project with Vite version 2.9.7 is related to the handling of images stored in the public folder within the project's root directory. To import these images, I utilized Vite's import.meta.glob function, like so: imp ...

javascriptreactjsvite

Tips for positioning elements in the header section

I'm struggling to prevent my HTML element from pushing down my other elements. When I look at the header, you can see that the BitBay title is causing alignment issues with the search bar and the account button. Even after trying to use the text-alig ...

htmlcss

The selected data is not being displayed

My input field is not displaying anything. Below is the script function in my view: <script> var Features = []; function LoadFeatures(element) { if(Features.length === 0) { $.ajax({ url:'@Url.Action("GetFeatures"," ...

javascriptajaxasp.net-mvcjson.netasp.net-ajax

Restrict the second datepicker based on the selection made in the first datepicker

Currently, I am attempting to utilize the code snippet below to manage the minimum date of a datepicker field based on the selection in a previous field. This situation mirrors a typical "start date" and "end date" scenario. Additionally, I aim to update t ...

jquerydatejquery-uidatepicker

The word-wrap property does not function properly in the <small> element or any other HTML elements

My code has a small issue with the word-wrap property not working as expected. When I change it to a div element, it works fine but I need to use the small or another specified element. Does anyone have any ideas why the word is not breaking and what could ...

htmlcss

The children of the KendoUI treeview are showing up as null

Within my KendoUI treeview setup, the main nodes trigger a call to an MVC controller that checks for a nullable ID parameter before utilizing a different model. When accessing the URL: http://localhost:2949/Report/GetReportGroupAssignments The resulting ...

javascriptc#kendo-uitreeviewkendo-treeview

Error occurred within node while attempting to create a directory using mkdirsync

I wrote some code. try{ var Storage = multer.diskStorage({ destination: function (req, file, callback) { fs.mkdirSync('/home/data/' + file.originalname, { recursive: true }, (error) => { ...

javascriptnode.js

manipulating child element's innerHTML with javascript

Is there a way to change my icon from expand_more to expand_less in the code below? <li class="dropdown-bt" onclick="dropdown('content');"> <a>dropdown-content <i class="material-icons">expand_more</i></a> </ ...

javascripthtmlcss

Utilizing JavaScript to dynamically update the user interface after submitting a form using jQuery

I am working on implementing an Input element that triggers a form submission: <input type="submit" value="Download" id="downloadButton" class="btn-download" /> The specific requirement is for the button to first execute a javascript function and t ...

javascriptjqueryhtml

Struggling with modifying class in HTML using JavaScript

I've been attempting to replicate a JavaScript code I came across on the internet in order to create a functioning dropdown menu. The concept is quite straightforward - the div class starts as xxx-closed and upon clicking, with the help of JavaScript, ...

javascriptjqueryhtml

Checking the security status of a PDF file in the web browser to determine if it

Within my platform, individuals have the ability to upload PDF files for others to access at a later time. In order to accommodate this functionality, I require that these PDFs are not secured or encrypted, and can be easily viewed by any user. To ensure ...

javascriptreactjspdfexif-js

Pattern for identifying JavaScript import declarations

My task involves using node to read the contents of a file. Specifically, I am looking to identify and extract a particular import statement within the file that includes the "foo-bar" package. The goal is to match only the line or lines that contain the ...

javascriptnode.jsregex

Having trouble assigning the current page in NextJS navigation

I have a unique setup for my navigation system in my NextJS project: const menu = [ { name: 'Home', href: '/home', icon: HomeIcon, current: true }, { name: 'About', href: '/about', icon: InfoIcon, current: fa ...

javascriptreactjsnext.jsjsx

Struggling with Implementing Modals in Bootstrap 3.3.7

I've been encountering an issue with modal functionality. In order to troubleshoot my own modals, I decided to replicate the modal example code from Bootstrap's website into a new HTML file. Despite linking to the CDN, the modal does not functio ...

htmlcsstwitter-bootstrap

Employing Bootstrap4 in conjunction with Rails 5

After following the official guide and checking out this post with no success, I'm in need of some help. Can anyone shed some light on this? (source on github) Here is my Gem file: ... #bootstrap gem 'bootstrap', '~> 4.0.0.alpha3.1 ...

ruby-on-railsrubytwitter-bootstraptwitter-bootstrap-4bootstrap-4