Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Bootstrap 4

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

by
Difficulty:IntermediateLength:ShortLanguages:

In this quick tip, we’ll build a Bootstrap 4 accordion, 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.

What Are Bootstrap Components?

Bootstrap has a huge (but not overwhelming) collection of components which you can use in your projects. These include alerts, badges, breadcrumbs, buttons, cards, carousels–the list goes on and on! In some cases Bootstrap prefers to be unobtrusive and instead provides the raw ingredients to build your own components. That’s the case with what we’re building today. Take a look at the Bootstrap component documentation for more details.

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:

Adding Font Awesome into our pen

2. Build a Simple Accordion

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

“The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle.”

Our accordion will contain three collapsible elements:

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).

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.

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:

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:

Now let’s check it again!

Conclusion

In this short tutorial we played with Bootstrap 4’s collapse component, built some accordion examples, 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 a Bootstrap accordion, let us know in the comments below.

Useful Links

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.