Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
Read the
official Bootstrap Documentation for a full list of
instructions and other options.
The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, add the .open
class on the .accordion
.
<div class="accordion" id="accordionExample">
<div class="card accordion-item active">
<h2 class="accordion-header" id="headingOne">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionOne" aria-expanded="true" aria-controls="accordionOne" role="tabpanel">
Accordion Item 1
</button>
</h2>
<div id="accordionOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi
bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears
marshmallow pastry pie.
</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionTwo" aria-expanded="false" aria-controls="accordionTwo" role="tabpanel">
Accordion Item 2
</button>
</h2>
<div id="accordionTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice
cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes
carrot cake. Fruitcake chocolate chupa chups.
</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header" id="headingThree">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionThree" aria-expanded="false" aria-controls="accordionThree" role="tabpanel">
Accordion Item 3
</button>
</h2>
<div id="accordionThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread
marshmallow sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels. Ice cream
wafer danish cookie caramels muffin.
</div>
</div>
</div>
</div>
For accordion without arrow, use .accordion-without-arrow
class with .accordion
class.
<div id="accordionIcon" class="accordion accordion-without-arrow">
<div class="accordion-item card">
<h2 class="accordion-header text-body d-flex justify-content-between" id="accordionIconOne">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionIcon-1" aria-controls="accordionIcon-1">
Accordion Item 1
</button>
</h2>
<div id="accordionIcon-1" class="accordion-collapse collapse" data-bs-parent="#accordionIcon">
<div class="accordion-body">
Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi
bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears
marshmallow pastry pie.
</div>
</div>
</div>
<div class="accordion-item card">
<h2 class="accordion-header text-body d-flex justify-content-between" id="accordionIconTwo">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionIcon-2" aria-controls="accordionIcon-2">
Accordion Item 2
</button>
</h2>
<div id="accordionIcon-2" class="accordion-collapse collapse" data-bs-parent="#accordionIcon">
<div class="accordion-body">
Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice
cream
halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes carrot
cake.
Fruitcake chocolate chupa chups.
</div>
</div>
</div>
<div class="accordion-item card active">
<h2 class="accordion-header text-body d-flex justify-content-between" id="accordionIconThree">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionIcon-3" aria-expanded="true" aria-controls="accordionIcon-3" role="tabpanel">
Accordion Item 3
</button>
</h2>
<div id="accordionIcon-3" class="accordion-collapse collapse show" data-bs-parent="#accordionIcon">
<div class="accordion-body">
Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread
marshmallow
sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels. Ice cream wafer danish
cookie caramels muffin.
</div>
</div>
</div>
</div>
Class | Description |
---|---|
class="accordion-without-arrow"
|
Use this class with .accordion class for accordion without arrows. |
Advance color styling options like heading color, border, outline accordion, solid color accordion and accordion with Icon.
To add icon before the Accordion header.
Omit the data-bs-parent
attribute on each .accordion-collapse
to make accordion items stay open when another item is opened.
<div class="accordion" id="accordionWithIcon">
<div class="card accordion-item active mb-2">
<h2 class="accordion-header d-flex align-items-center">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionWithIcon-1" aria-expanded="true">
<i class="bx bx-bar-chart-alt-2 me-2"></i>
Header Option 1
</button>
</h2>
<div id="accordionWithIcon-1" class="accordion-collapse collapse show" >
<div class="accordion-body">
Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi
bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears
marshmallow pastry pie.
</div>
</div>
</div>
<div class="accordion-item card">
<h2 class="accordion-header d-flex align-items-center">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionWithIcon-2" aria-expanded="false">
<i class="bx bx-briefcase me-2"></i>
Header Option 2
</button>
</h2>
<div id="accordionWithIcon-2" class="accordion-collapse collapse" >
<div class="accordion-body">
Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice
cream
halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes carrot
cake.
Fruitcake chocolate chupa chups.
</div>
</div>
</div>
<div class="accordion-item card">
<h2 class="accordion-header d-flex align-items-center">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionWithIcon-3" aria-expanded="false">
<i class="bx bx-gift me-2"></i>
Header Option 3
</button>
</h2>
<div id="accordionWithIcon-3" class="accordion-collapse collapse" >
<div class="accordion-body">
Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread
marshmallow
sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels. Ice cream wafer danish
cookie caramels muffin.
</div>
</div>
</div>
</div>
This class will add header text color to open accordion card.
<div class="accordion accordion-header-primary" id="accordionStyle1">
<div class="accordion-item card">
<h2 class="accordion-header">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionStyle1-1" aria-expanded="false">
Header Option 1
</button>
</h2>
<div id="accordionStyle1-1" class="accordion-collapse collapse" data-bs-parent="#accordionStyle1">
<div class="accordion-body">
Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi
bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears
marshmallow pastry pie.
</div>
</div>
</div>
<div class="accordion-item card">
<h2 class="accordion-header">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionStyle1-2" aria-expanded="false">
Header Option 2
</button>
</h2>
<div id="accordionStyle1-2" class="accordion-collapse collapse" data-bs-parent="#accordionStyle1">
<div class="accordion-body">
Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice
cream
halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes carrot
cake.
Fruitcake chocolate chupa chups.
</div>
</div>
</div>
<div class="card accordion-item active mb-2">
<h2 class="accordion-header">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionStyle1-3" aria-expanded="true">
Header Option 3
</button>
</h2>
<div id="accordionStyle1-3" class="accordion-collapse collapse show" data-bs-parent="#accordionStyle1">
<div class="accordion-body">
Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread
marshmallow
sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels. Ice cream wafer danish
cookie caramels muffin.
</div>
</div>
</div>
</div
// Function to toggle active class
const accordionActiveFunction = function(e) {
if (e.type == 'show.bs.collapse') {
e.target.closest('.accordion-item').classList.add('active');
} else {
e.target.closest('.accordion-item').classList.remove('active');
}
};
// function call for header color variant
const headerAccordion = document.getElementById('accordionStyle1');
headerAccordion.addEventListener('show.bs.collapse', accordionActiveFunction);
headerAccordion.addEventListener('hide.bs.collapse', accordionActiveFunction);
Class | Description |
---|---|
class="accordion-header-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Here is header color accordion mixin which allow you to easily create header color accordion style by adding your own class and colors.
@mixin template-accordion-header-variant($parent, $background)
@include template-accordion-header-variant(".accordion-header-MyColor", "#000000");
For popout accordion, use .accordion-popout
class with .accordion
class.
<div id="accordionPopoutIcon" class="accordion accordion-popout">
<div class="accordion-item card">
<h2 class="accordion-header text-body d-flex justify-content-between" id="accordionPopoutIconOne">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionPopoutIcon-1" aria-controls="accordionPopoutIcon-1">
Accordion Item 1
</button>
</h2>
<div id="accordionPopoutIcon-1" class="accordion-collapse collapse" data-bs-parent="#accordionPopoutIcon">
<div class="accordion-body">
Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi
bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears
marshmallow pastry pie.
</div>
</div>
</div>
<div class="accordion-item card">
<h2 class="accordion-header text-body d-flex justify-content-between" id="accordionPopoutIconTwo">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionPopoutIcon-2" aria-controls="accordionPopoutIcon-2">
Accordion Item 2
</button>
</h2>
<div id="accordionPopoutIcon-2" class="accordion-collapse collapse" data-bs-parent="#accordionPopoutIcon">
<div class="accordion-body">
Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice
cream
halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes carrot
cake.
Fruitcake chocolate chupa chups.
</div>
</div>
</div>
<div class="accordion-item card active">
<h2 class="accordion-header text-body d-flex justify-content-between" id="accordionPopoutIconThree">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionPopoutIcon-3" aria-expanded="true" aria-controls="accordionPopoutIcon-3" role="tabpanel">
Accordion Item 3
</button>
</h2>
<div id="accordionPopoutIcon-3" class="accordion-collapse collapse show" data-bs-parent="#accordionPopoutIcon">
<div class="accordion-body">
Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread
marshmallow
sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels. Ice cream wafer danish
cookie caramels muffin.
</div>
</div>
</div>
</div>
Class | Description |
---|---|
class="accordion-popout"
|
Use this class with .accordion class for accordion popout. |