Fading effect of Bootstrap JS on reducing content size

My quest for a toggle collapse button led me to this helpful link: https://getbootstrap.com/docs/4.0/components/collapse/ I found what I needed, but encountered an issue with the transition; clicking on the button immediately reveals my div. I desire a slower expansion with a smooth transition effect. Below is the code snippet I am working with:

.innerdiv{
    display: block;
    width: 33%;
    padding: 50px;
    margin-left: 2px;
    text-align: center;
    background-color: #2bb88d;
    margin-top: 20px;
    border-radius: 20px;
    height: 350px;
    overflow:auto ;
    float: left;
    clear: right;
    transition: 15s;
}
<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="styletest.css">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8acb6adb6ab">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14767b7b60676066756454203a213a27">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  </head>
  <body>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> more adresses </button>
    <div class="collapse" id="collapseExample">
      <div class="innerdiv"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis est soluta aliquam necessitatibus quia tempora corrupti hic fuga! Perspiciatis iste vero ipsum maxime, saepe vitae dolores amet iure assumenda cum.</p></div>
      <div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa architecto fugit id laborum quidem...
      <div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa architecto fugit id laborum quidem...</div>
    </div>
  </body>
</html>

javascripthtmljquerycssbootstrap-4

Answer №1

If you want to personalize the default bootstrap collapsing animation, you must override the existing class known as collapsing. Here's how you can modify it:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02606d6d76717670637242362c372c31">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7959898838483859687b7c3d9c2d9c4">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

</head>

<style>
    .innerdiv {
        display: block;
        width: 33%;
        padding: 50px;
        margin-left: 2px;
        text-align: center;
        background-color: #2bb88d;
        margin-top: 20px;
        border-radius: 20px;
        height: 350px;
        overflow: auto;
        float: left;
        clear: right;
    }
    
    .collapsing {
        transition: 15s;
    }
</style>

<body>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> more addresses </button>
    <div class="collapse" id="collapseExample">
        <div class="innerdiv">
            <p>Customize this section with your own content.</p>
        </div>
        <div class="innerdiv">Your custom content goes here.</div>
        <div class="innerdiv">More custom content can be added in this area.</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

A step-by-step guide on utilizing URL creation in Yii1

My controller is saved in the directory Controller/SiteAction/1700/Participate and my view file can be found at views/site/eventview. I need to add a button inside eventview that directs to Controller/SiteAction/1700/Participate. Therefore, I have to utili ...

htmlajaxyii1.x

It is not possible for AngularJS to retrieve values using ng-model when ng-repeat is being used

Is there a way to capture dynamically generated data using ng-model (data created with ng-repeat) so that I can send it as an object to Firebase, my flat database? Currently, the ng-model is only retrieving empty strings as values. Any ideas for a solution ...

javascriptangularjsangularjs-ng-repeatangular-ngmodelangularjs-ng-click

What could be causing the hover effect to not work on the cards in my Svelte component? (HTML+CSS)

Greetings everyone! This is my debut post on this platform, and I'm in urgent need of assistance as I am relatively new to the world of programming. I've been trying tirelessly to implement a hover effect on these cards, but for some reason, it ...

javascripthtmlcssbootstrap-5svelte

Executing a protractor test on Safari results in the message "Angular was not located on the webpage https://angularjs.org/"

Recently, I encountered an issue while trying to run a Protractor test on Safari, even when following the official example provided at http://www.protractortest.org/. Below are my conf.js and todo-spec.js files. The problem arises when I set browser.ignor ...

javascriptangularjsseleniumsafariprotractor

The comparison between local variables and data can result in a significant drop in performance

My current project involves VueJS and Cesium, but I'm facing a performance issue with a significant drop in frame rate. While I have identified the problem area, I am unsure of why this is happening and how to resolve it. export default { name: ...

javascriptvue.jsthiscesiumjsscoping

What might be causing certain ajax buttons to malfunction?

There are 5 buttons displayed here and they are all functioning correctly. <button type="submit" id="submit_button1">Img1</button> <button type="submit" id="submit_button2">Img2</button> <button type="submit" id="submit_button3" ...

javascriptjqueryajax

What is the process for eliminating the hover effect on a Bootstrap button?

I have customized a Bootstrap button in my stylesheet to make it dark, but it still has a hover effect from Bootstrap that I want to remove. How can I get rid of this hover effect? Take a look at the code snippet below for reference: .btn-dark { min-w ...

htmlcsstwitter-bootstrap-3

What method can I use to enlarge the carousel component from the flowbit-svelte library?

I have been working on a project that requires a Carousel, and I decided to incorporate the flowbit-svelte carousel into my svelte project. While the carousel is functioning well, I am facing an issue with the component size. It seems to be cutting off my ...

csstailwind-csssvelteresponsivesveltekit

resume the execution of PHP script after being called by Ajax

I have a page named call.php containing the following code: <script src="http://localhost/js/jquery.js"></script> <script> $(document).ready(function() { $.post("exe.php", { ...

phpjqueryajax

What is the best way to choose the nearest element using the initial part of a class name?

I am working on a section of a table and need to hide a specific part when an icon is clicked. Below is the code snippet: <tr class="getmoreinfo_19"> <td>&nbsp;</td> <td colspan="3"> <div c ...

javascripthtml

Accessing the background page of a Chrome extension while it's in operation

I am in the process of developing my first chrome extension that allows youtube.com/tv to run in the background so it can be accessed easily on a phone or tablet. Everything is working fine, except for the fact that if I want to watch the video and not j ...

javascripthtmljsongoogle-chrome-extensionmanifest

Illuminate objects using three.js

My expertise in shaders and three.js is limited, however I am currently experimenting with creating a dynamic glowing effect similar to lights being flicked on and off. Currently, I am adjusting the color saturation and lightness which somewhat achieves ...

javascriptthree.js

"Receive your share of the catch in a pop-up notification

Is there a way to determine if a user shared a result without using the social network's Javascript SDK? All sharing aspects (authorization, sharing, etc.) are done through popups on my domain. var popup = window.open('/api/share/' + servic ...

javascriptfacebookpopupshare

Ways to dynamically update the value of an object property within reactJS state

In the scenario where a component holds state like so: this.state = { enabled: { one: false, two: false, three: false } } What is the proper way to utilize this.setState() in order to set the value of a dynamic property? An attempt such ...

javascriptreactjsreact-native

When trying to validate an HTML form using AJAX, jQuery, and JavaScript, the validation may not

Here is a high-level overview of what happens: The following code functions correctly... <div id='showme'></div> <div id='theform'> <form ...> <input required ... <input required ... <inpu ...

javascriptphpjqueryajaxonclick

Trouble with executing two asynchronous AJAX calls simultaneously in ASP.NET using jQuery

When developing a web application in asp.net, I encountered an issue with using jQuery Ajax for some pages. The problem arose when making two asynchronous Ajax calls - instead of receiving the results one by one, they both appeared simultaneously after the ...

javascriptasp.netjqueryajaxasynchronous

Problem with CSS animations in IE10

I've encountered a problem with a specific section of a website I created. This section functions perfectly on all browsers and older versions of Internet Explorer, but not on the latest versions. It seems that IE no longer supports [IF] statements in ...

htmlcssanimationfadeinternet-explorer-11

Getting data from an Ajax call

I am struggling to find a solution for retrieving data from a processing script into a Request page using Ajax and PHP. The issue I am facing is shown in the error message below: SyntaxError: JSON.parse: unexpected character at line 1 column 13 of the J ...

javascriptphpjqueryjsonajax

Is it possible to set the state property in React js using the axios response?

After receiving data from axios, I am trying to store the response in a state value for rendering it in html. However, even though response.results displays the data when printed out, setting response.results in setState() results in an empty value. Here ...

javascriptreactjssetstate

Using innerHTML in React to remove child nodes Tutorial

I'm encountering slow performance when unmounting over 30,000 components on a page using conditional rendering triggered by a button click. This process takes around 10+ seconds and causes the page to hang. Interestingly, setting the parent container& ...

javascriptreactjsreact-hooksreact-fiber