Bootstrap Accordion

An Accordion is a vertically stacked list of items with controls to show and hide items. It is useful when the user needs to toggle between large contents. Bootstrap 5 accordion comes with the collapse plugins which makes it collapsible. Here is the list of classes used to create accordion using bootstrap 5.

How to Create Bootstrap Accordion?

Use .accordion class to create accordion.
Contents are added within .accordion-item class.
Each item has .accordion-header class and .accordion-body class.
For adding buttons of accordion-header use .accodion-button class within <button> tag.
.data-bs-toggle="collapse" attribute is used to toggle the button.
.data-bs-target points to the id of .accordion-collapse class.
.aria-expanded="false" is used to hide the content of accordion initially
An inner collapse class is used before .acordion-body to make it collapsible.
.aria-labelledbly attribute points to its header id.
.data-bs-parent points to the id of .accordion class.

Example: Creating an Accordion using bootstrap 5

Here, we have created an accordion with a list of items. Each item is added within the .accordion-item class. Each item has a .accordion-header and .accordion-body class . A header class consists of a collapsable button. The .accordion-body is made collapsible by placing it within the collapse class. So now you can toggle the accordion with a single click.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
	<div class="accordion" id="accordionExample">
	  <div class="accordion-item">
		<h2 class="accordion-header" id="headingOne">
		  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
			Accordion Item 1
		  </button>
		</h2>
		<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
		  <div class="accordion-body">
			<p> Accordion uses internal collapse plugin. You can expand the accordion with a single click. Acordion are useful when you want to create list of items with large contents bound in small area.</p>
		  </div>
		</div>
	  </div>
	  <div class="accordion-item">
		<h2 class="accordion-header" id="headingTwo">
		  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
			Accordion Item 2
		  </button>
		</h2>
		<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
		  <div class="accordion-body">
			<p> Accordion uses internal collapse plugin. You can expand the accordion with a single click. Acordion are useful when you want to create list of items with large contents bound in small area.</p>
		  </div>
		</div>
	  </div>
	  <div class="accordion-item">
		<h2 class="accordion-header" id="headingThree">
		  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
			Accordion Item 3
		  </button>
		</h2>
		<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
		  <div class="accordion-body">
			<p> Accordion uses internal collapse plugin. You can expand the accordion with a single click. Acordion are useful when you want to create list of items with large contents bound in small area.</p>
		  </div>
		</div>
	  </div>
	</div>
</body>
</html>

Output:

Here is the output of the above program.

Accordion

Flush in Accordion

The .accordion-flush class is used within the .accordion class to remove some default background colors, borders, and some rounded corners. It just fills the spaces to make it more representative for real-world applications. Let's see an example.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>

<body>
	<div class="accordion accordion-flush" id="accordionExample">
	  <div class="accordion-item">
		<h2 class="accordion-header" id="headingOne">
		  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
			Accordion Item 1
		  </button>
		</h2>
		<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
		  <div class="accordion-body">
			<p> Accordion uses internal collapse plugin. You can expand the accordion with a single click. Acordion are useful when you want to create list of items with large contents bound in small area.</p>
		  </div>
		</div>
	  </div>
	  <div class="accordion-item">
		<h2 class="accordion-header" id="headingTwo">
		  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
			Accordion Item 2
		  </button>
		</h2>
		<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
		  <div class="accordion-body">
			<p> Accordion uses internal collapse plugin. You can expand the accordion with a single click. Acordion are useful when you want to create list of items with large contents bound in small area.</p>
		  </div>
		</div>
	  </div>
	  <div class="accordion-item">
		<h2 class="accordion-header" id="headingThree">
		  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
			Accordion Item 3
		  </button>
		</h2>
		<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
		  <div class="accordion-body">
			<p> Accordion uses internal collapse plugin. You can expand the accordion with a single click. Acordion are useful when you want to create list of items with large contents bound in small area.</p>
		  </div>
		</div>
	  </div>
	</div>
</body>
</html>

Output:

Here is the output of the above program.

Accordion with flush

Default Open Accordion

In the above example, we have seen that only a single item remains open at a time. But multiple items can also remain open at a time. For that, we just need to remove the .data-bs-parent class from the .accordion-class. To close them back just click on the button.

Example: Keeping multiple items open at a time

Here is an example to open multiple items of the accordion at a time in bootstrap 5.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>

<body>
	<div class="accordion accordion-flush" id="accordionExample">
	  <div class="accordion-item">
		<h2 class="accordion-header" id="headingOne">
		  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
			Accordion Item 1
		  </button>
		</h2>
		<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" >
		  <div class="accordion-body">
			<p> Accordion uses internal collapse plugin. You can expand the accordion with a single click. Acordion are useful when you want to create list of items with large contents bound in small area.</p>
		  </div>
		</div>
	  </div>
	  <div class="accordion-item">
		<h2 class="accordion-header" id="headingTwo">
		  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
			Accordion Item 2
		  </button>
		</h2>
		<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" >
		  <div class="accordion-body">
			<p> Accordion uses internal collapse plugin. You can expand the accordion with a single click. Acordion are useful when you want to create list of items with large contents bound in small area.</p>
		  </div>
		</div>
	  </div>
	  <div class="accordion-item">
		<h2 class="accordion-header" id="headingThree">
		  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
			Accordion Item 3
		  </button>
		</h2>
		<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" >
		  <div class="accordion-body">
			<p> Accordion uses internal collapse plugin. You can expand the accordion with a single click. Acordion are useful when you want to create list of items with large contents bound in small area.</p>
		  </div>
		</div>
	  </div>
	</div>
</body>
</html>

Output:

Here is the output of the above program.

Multiple open items

Conclusion

Here we have learned to create accordions using bootstrap 5. The accordions are vertically collapsable. Bootstrap provides an easy way to add accordions without any burden of CSS designs. It saves time and makes it easier to add accordion to the web page.

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

Bootstrap Accordion

How to Create Bootstrap Accordion?

Example: Creating an Accordion using bootstrap 5

Output:

Flush in Accordion

Output:

Default Open Accordion

Example: Keeping multiple items open at a time

Output:

Conclusion