Quick Tip: How to Customize Bootstrap 4’s Accordion Component

In this quick tip, we’ll build a Bootstrap 4 accordion component, tailor it with some CSS changes, and apply a few JavaScript customizations. Let’s get started!

Note: This tutorial assumes you have some familiarity with Bootstrap 4.

1. Include Font Awesome Icons

For the purposes of this tutorial, beyond the required CSS and JavaScript Bootstrap files I’ve also incorporated the Font Awesome icon pack into our pen. We can do that by linking to the Font Awesome CDN directly from our CSS settings:

2. Build a Simple Accordion

To create our accordion we’ll rely on some example code for the accordion component, kindly provided by Bootstrap.

Our accordion will contain three collapsible elements:

<div id="accordion" class="myaccordion"> <div class="card">...</div> <div class="card">...</div> <div class="card">...</div>
</div>

The contents within the first collapsible item are as follows: a header div containing a heading and a button, and a second div with whatever the body content is (a list in this case).

<div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="d-flex align-items-center justify-content-between btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Undergraduate Studies <span class="fa-stack fa-sm"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-plus fa-stack-1x fa-inverse"></i> </span> </button> </h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> <ul> <li>Computer Science</li> <li>Economics</li> <li>Sociology</li> <li>Nursing</li> <li>English</li> </ul> </div>
</div>

Notice that we stack multiple icons in our button, thanks to the support styling bundled with Font Awesome.

With that done, we then add content for the remaining two collapsible items.

3. Add Some Basic Styles

Next we specify a few CSS rules for our component. Nothing too fancy, just some basic color and sizing styles to make things look a little more unique.

.myaccordion { max-width: 500px; margin: 50px auto; box-shadow: 0 0 1px rgba(0,0,0,0.1);
} .myaccordion .card,
.myaccordion .card:last-child .card-header { border: none;
} .myaccordion .card-header { border-bottom-color: #EDEFF0; background: transparent;
} .myaccordion .fa-stack { font-size: 18px;
} .myaccordion .btn { width: 100%; font-weight: bold; color: #004987; padding: 0;
} .myaccordion .btn-link:hover,
.myaccordion .btn-link:focus { text-decoration: none;
} .myaccordion li + li { margin-top: 10px;
}

Good work! So far our component looks like this:

4. Customizations

With the HTML and CSS in place, let’s look at a few useful customizations that we can add to our accordion.

Toggle Icons

By default, our controls include a “plus” icon. 

Each time a control is clicked, it would be nice to have its icon toggle between being a “plus” or a “minus” icon, depending on the state of the collapsible element.

To achieve this we can take advantage of the show.bs.collapse and hide.bs.collapse events.

Here’s the required JavaScript code, which switches the class on our <i> icon:

$("#accordion").on("hide.bs.collapse show.bs.collapse", e => { $(e.target) .prev() .find("i:last-child") .toggleClass("fa-minus fa-plus");
});

And here’s the corresponding demo:

Set The Default State

In our example all collapsible elements are closed to begin with. 

But let’s say that we want the first collapsible element to be opened by default. To do so we have to add the show class to it, then on the related button (control) element we remove the collapsed class and, for accessibility, set aria-expanded="true".

Here’s our accordion with that change made:

Multiple Collapsible Elements Opened

Sometimes we might want to have multiple collapsible elements open at the same time. We can achieve this by removing the data-parent attribute from all collapsible elements.

Here’s a demo with that behavior:

Animating The Position

Consider the following scenario: imagine there’s a lot of content inside the collapsible elements. At a certain point you read the text inside the second element, after which you click to see the contents of the third collapsible item. The second item closes again, so now, in order to see the beginning of the third element, you’ll have to scroll back up. Ugh, not great UX.

Here’s what it looks like:

One simple fix, which takes advantage of the shown.bs.collapse event, is to fire a scroll animation to the top position of the associated control.

In order to do that we add the following JavaScript code to the previous demo:

$("#accordion").on("shown.bs.collapse", e => { $("html, body").animate( { scrollTop: $(e.target) .prev() .offset().top }, 400 );
});

Now let’s check it again!

Conclusion

In this short tutorial we played with Bootstrap 4’s accordion component, covered some common requirements, and built some solutions. You can now go and apply the knowledge gained today in your upcoming Bootstrap projects.

If you’ve ever built any other useful extensions for Bootstrap’s accordion component, let us know in the comments below.