When we think of an accordion, what usually comes to mind is the musical instrument – a box shaped contraption that uses a keyboard or manual to push bellows – the “box” portion of the instrument – together and apart.
A Bootstrap Accordion is not the musical instrument variety, but the concept has similarities. This article reviews how to get started with Bootstrap, goes over what the accordion UI element is, and how to construct one using the Bootstrap framework.
Getting Started
The first thing we need to do to set up a Bootstrap Accordion is to ensure we have the proper dependencies. For this, we need Bootstrap, PopperJS, and jQuery. Take a look at Bootstrap’s Quick Start page for help in getting dependencies added to your project.
It’s your decision in how to handle the dependencies, but the easiest way is to use the content delivery network – the CDN – for jQuery, Popper.js, and Bootstrap. Be careful of the order of your <script> tags – order matters here.
You’re now ready to get started!
Using Bootstrap Documentation to Create an Accordion
On the left hand side of the “Introduction/Getting Started” page, you see a sidebar that links to various things. Take a look for the “Components” link and click on it. This will navigate you to the first of Bootstrap’s many available components: “Alerts”. If we take a look at the sidebar again, it now shows the different links to all the different components we have available to us.
Click on the “Collapse” component to get started. This will have the information we need if you scroll down to the Accordion section.
How It Works
Bootstrap uses a JavaScript plugin called collapse. This is primarily how the accordion component works. This plugin is extended to the accordion component when we wrap the outer container in the .accordion class. This will animate the height of each Bootstrap card from it’s initial height to 0 and back when you toggle it on and off.
Take a look at the structure of the markup to see if you can find patterns between the card-header and the rest of the card and how the data attributes link up with the ids in the elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Bootstrap Accordion Demo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Money Plane
</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<img src="https://image.tmdb.org/t/p/original/pq0JSpwyT2URytdFG0euztQPAyR.jpg" alt="Money Plane" class="img-fluid">
<h5 style="margin-bottom: 0px;">Money Plane</h5>
<p style="font-size: 0.8rem; font-style: italic;">Release Date: 9/28/2020</p>
<p>A professional thief with $40 million in debt and his family's life on the line must commit one final heist - rob a futuristic airborne casino filled with the world's most dangerous criminals.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Mulan
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body"><img src="https://image.tmdb.org/t/p/original/zzWGRw277MNoCs3zhyG3YmYQsXv.jpg" alt="Mulan" class="img-fluid"><h5 style="margin-bottom: 0px;">Mulan</h5><p style="font-size: 0.8rem; font-style: italic;">Release Date: 9/9/2020</p><p>When the Emperor of China issues a decree that one man per family must serve in the Imperial Chinese Army to defend the country from Huns, Hua Mulan, the eldest daughter of an honored warrior, steps in to take the place of her ailing father. She is spirited, determined and quick on her feet. Disguised as a man by the name of Hua Jun, she is tested every step of the way and must harness her innermost strength and embrace her true potential.</p></div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Phineas and Ferb The Movie: Candace Against the Universe
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body"><img src="https://image.tmdb.org/t/p/original/lkeBhXGJFRlhI7cBWn8LQQAdZqK.jpg" alt="Phineas and Ferb The Movie: Candace Against the Universe" class="img-fluid"><h5 style="margin-bottom: 0px;">Phineas and Ferb The Movie: Candace Against the Universe</h5><p style="font-size: 0.8rem; font-style: italic;">Release Date: 8/27/2020</p><p>Phineas and Ferb travel across the galaxy to rescue their older sister Candace, who has been abducted by aliens and taken to a utopia in a far-off planet, free of her pesky little brothers.</p></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>Always double check accessibility standards for these Bootstrap components to be sure they meet accessibility standards. You may need to check out ways to customize your component to make your collapsible element more accessible.
Keep in mind which ids need to match up with which data attributes to get the logic to work on Bootstrap’s end. Sometimes it’s helpful to check the minified CSS and JS files that Bootstrap provides with their CDN to learn more about the structure.
That’s the accordion component! Good luck on traversing the rest of your Bootstrap journey.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
