Struggle with the accordion collapse animation in Bootstrap4?

My implementation of accordion collapse in Bootstrap 4 is functional, but lacks smoothness. Can anyone offer suggestions on how to improve this? I have attempted to nest divs inside each other, but it has not yielded the desired outcome. Below is the code snippet. Thank you!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<section>
  <div class="container-fluid bg-light ">
    <div id="accordion">
      <div class="text-center pt-5 pb-4 mt-5 pt-4">
        <h2 id="price">Our prices</h2>
        <p> Lorem ipsum dolor, sit amet consectetur adipisicing.</p>
      </div>
      <div id="myGroup" class="d-flex align-items-center pt-4 justify-content-center flex-md-row flex-wrap">
        <div class="d-flex flex-column col-md-4 col-lg-3 ">
          <a href="#classy" data-toggle="collapse" aria-controls="classy" id="button" class="btn btn-outline-warning btn-lg mb-3" aria-expanded="true">Classy</a>
          <a href="#casual" data-toggle="collapse" aria-controls="casual" id="button" class="btn btn-outline-warning btn-lg mb-3 collapsed" aria-expanded="false">Casual</a>
          <a href="#jackets" data-toggle="collapse" aria-controls="jackets" id="button" class="btn btn-outline-warning btn-lg mb-3 collapsed" aria-expanded="false">Jacket</a>
        </div>
        <div id="classy" class="collapse show card col-md-4 col-lg-3 px-0 ml-4 my-5 " data-parent="#accordion">
          <ul class="list-group list-group-flush cards" id="cards">
            <li class="list-group-item">Suit</li>
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Vestibulum at eros</li>
          </ul>
        </div>
        <div id="casual" class="collapse card col-md-4 col-lg-3 px-0 ml-4 my-5" data-parent="#accordion">
          <ul class="list-group list-group-flush cards" id="cards">
            <li class="list-group-item">farmerki...........</li>
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Vestibulum at eros</li>
          </ul>
        </div>
        <div id="jackets" class="collapse card col-md-4 col-lg-3 px-0 ml-4 my-5" data-parent="#accordion">
          <ul class="list-group list-group-flush cards" id="cards">
            <li class="list-group-item">jakna...........</li>
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Vestibulum at eros</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

htmlcssbootstrap-4

Answer №1

Hey there!

If you want to incorporate a sleek and efficient pure Bootstrap 4 accordion into your website, look no further!

Note: Make sure to check out the demo for a live example.

#accordion .collapsing {
    transition: height 1s ease-in-out;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<section>
  <div class="container-fluid bg-light ">
    <div id="accordion">
      <div class="text-center pt-5 pb-4 mt-5 pt-4">
        <h2 id="price">Our prices</h2>
        <p> Lorem ipsum dolor, sit amet consectetur adipisicing.</p>
      </div>
      <div id="accordion">
        <div class="row">
          <div class="col-6">
            <div class="card">
              <div class="card-header">
                <h5 class="mb-0">
                  <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Collapsible Group Item #1
                  </button>
                </h5>
              </div>
            </div> 
            <div class="card">
              <div class="card-header">
                <h5 class="mb-0">
                  <button class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                    Collapsible Group Item #1
                  </button>
                </h5>
              </div>
            </div> 
            <div class="card">
              <div class="card-header">
                <h5 class="mb-0">
                  <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                    Collapsible Group Item #1
                  </button>
                </h5>
              </div>
            </div>
          </div>
          <div class="col-6">
              <div class="card">
                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                  <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>

                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                  <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                  <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                  </div>
               </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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

Displaying incorrect symbols with icon fonts

I have successfully integrated icon fonts into my simple web page. Check it out on jsFiddle here My design is similar to this example, but instead of bars, I see a snake icon displayed. How can I fix this issue with the fonts? Here is the code snippet: ...

htmlcssicon-fonts

``Only Firefox supports jQuery animations, all other browsers fail to render them properly

This particular issue is a bit complex to articulate, so I'll begin by providing the code and then proceed to elaborate on the problem as best as I can. I'm assuming that you've already compared the results in Firefox and other browsers. He ...

jquerycssjquery-animate

Leverage CSS styling for database values within a PHP framework

How can I style MYSQL database values in HTML using CSS? My vegetarian database row has 'Y' for yes and 'N' for no. I want to apply different styles to these values using CSS as I display them on my PHP-based page. if ($result1->num_ ...

phphtmlcssmysqldatabase

Move the Bootstrap button to the right side of the div, extending beyond its boundaries

My bootstrap page seems to be experiencing an issue where the buttons within a div are shifted slightly to the right without any clear reason: https://i.sstatic.net/3xlMC.png https://i.sstatic.net/yFLFM.png https://i.sstatic.net/gh686.png The div in qu ...

htmlcssbootstrap-4

Using `getJson` to parse the tree structure

I am currently working with a JSON file that contains order data. The structure of the JSON file is as follows: { "orders": [ {"name": "Peter", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64140110011624050b0 ...

javascriptjqueryhtmljson

Div controls the margins of all other elements

I am encountering an issue when trying to position #slider, where the navigation and elements above it also move. It seems as though they are contained within #slider, even though they are not. HTML: <div id="slider" class="clearfix"> <d ...

htmlcsscss-float

JavaScript Calculator experiencing difficulty with adding two numbers together

I've been working on developing a calculator using HTML and JavaScript, but I'm facing an issue when trying to add two numbers together. Strangely enough, when attempting to calculate 1 + 0, I get the result of 512, and for 1 + 1, it returns 1024 ...

javascripthtmlcssmathbootstrap-4

Angular: Utilizing Nested ng-repeat Alongside groupBy Feature on Initial Page Load or Refresh

With some help, I've made it this far on my project. However, I need to take one more step to achieve my goal. I want to group data based on an attribute that is currently passed through an ng-click action. Is there a way to automatically do this on p ...

javascriptjqueryhtmlangularjs

Is there a method to establish varied usage permissions for a single page without any tracking?

I am puzzled by how a solution could create something like this. My goal is to have a webpage displaying 2 squares on a large screen. There will be 2 users, each needing access to write in their own square only on this page. <div class="square1"> ...

javascriptphpjqueryhtmlangular

JQuery Falters in Responding to Button's Click Action

Forgive me for what may seem like a silly question, but as someone new to JQuery, I have been struggling to figure out why my function is not displaying an alert when the button is clicked. Despite thorough research on Google, I haven't been able to f ...

javascriptjqueryhtmlajax

Integration issue: React.js is failing to render within a Django project

I have been working on a project where React is not rendering anything on Django localhost. index.html <!DOCTYPE html> <html lang="en"> <head></head> <body> <div id="App"> <!---all will b ...

javascripthtmldjangoreactjs

Inject AngularJS variable bindings into the view alongside HTML code

Is it possible to insert HTML markup into an Angular variable? app.js function myController($scope){ $scope.myItem = '<p>' + Example + '</p>'; } index.html <div ng-controller="myController">{{myItem}}</div&g ...

htmlangularjs

I need to figure out how to nest a div inside of a ul-li-a and ensure that the text inside the

In my search button, I have a cached list of options. When I select one, it should trigger the menu and choose the correct option. However, I am having trouble comparing the innerText of a div with the selected option from the search area. Both a and div e ...

javascriptjqueryhtmljquery-ui

Enabling the use of special characters when submitting a form

Currently, I am in the process of developing a contact form for a website. My main objective is to enable users to input non-Latin characters such as é or 車. However, I have encountered some challenges regarding where I should implement this feature. On ...

phpjqueryhtmlajaxforms

What could be causing my linear background to behave in this unusual manner?

Just when I thought styling my background with a simple line of code would be easy, I encountered an unexpected issue. Instead of a smooth linear-gradient from the top left to the bottom right, my background is showing rows of red and blue in between each ...

htmlcss

Tips for displaying website preloader just once

I recently added a preloader to my website, but I'm having trouble getting it to only play once per visit. Ideally, I want the animation to show up when the site is opened in a new tab or browser window, but not when navigating through the domain by c ...

javascriptjqueryhtmlcss

Conceal four input fields depending on the option chosen from the dropdown menu

I need assistance with hiding multiple input boxes. Although I've tried using if and else, it seems to only work for two of the boxes. My current code is written in regular JavaScript, but I am open to exploring a jQuery solution as well. window.onlo ...

javascriptjqueryhtml

Utilizing Vue JS to set an active state in conjunction with a for loop

Currently in Vue, I have a collection of strings that I am displaying using the v-for directive within a "list-group" component from Bootstrap. My goal is to apply an "active" state when an item is clicked, but I am struggling to identify a specific item w ...

javascriptjqueryhtmltwitter-bootstrapvue.js

What is the method for incorporating opacity into the background color CSS attribute using a Fluent UI color?

Currently, my challenge involves applying opacity to a background color sourced from the fluent UI library, which utilizes Design Tokens. Typically, I would add opacity to a background color like this: background-color: "rgba(255, 255, 255, 0.5)" However ...

cssreactjstypescriptfluent-uifluentui-react

Is there a way to adjust the footer to move downward automatically as new content is added to the body?

Hello friends! I encountered an issue with my website where the content in the body overlaps the footer when there is a lot of content added. I have created a navigation bar and footer separately on different pages and then included them on every page usin ...

htmlcssbootstrap-5