Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Accordion Component in Bootstrap 5
Accordion: Vertically stacked set of collapsible panels for showing and hiding content.
Basic Accordion
Simple Accordion Example
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
<!-- Basic accordion structure -->
<div class="accordion" id="basicAccordion">
<!-- First item (expanded by default) -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne"
class="accordion-collapse collapse show"
data-bs-parent="#basicAccordion">
<div class="accordion-body">
Content for first item
</div>
</div>
</div>
<!-- Second item (collapsed by default) -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo"
class="accordion-collapse collapse"
data-bs-parent="#basicAccordion">
<div class="accordion-body">
Content for second item
</div>
</div>
</div>
</div>Accordion Flush
Flush Accordion (No Background)
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.
Bootstrap 5 has removed jQuery dependency, added new utilities, improved grid system, and introduced new components.
Yes, Bootstrap is built with a mobile-first approach and is fully responsive.
<!-- Flush accordion (no background) -->
<div class="accordion accordion-flush" id="flushAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne">
Question #1
</button>
</h2>
<div id="flush-collapseOne"
class="accordion-collapse collapse"
data-bs-parent="#flushAccordion">
<div class="accordion-body">
Answer to question #1
</div>
</div>
</div>
</div>Always Open Accordion
Multiple Panels Open
This panel can stay open when other panels are opened. Remove the
data-bs-parent attribute to allow multiple panels to be open at the same time.This panel can also stay open. Multiple panels can be opened simultaneously.
All three panels can be open at the same time.
<!-- Accordion with multiple open panels -->
<div class="accordion" id="openAccordion">
<!-- Note: No data-bs-parent attribute -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#open-collapseOne">
Panel 1
</button>
</h2>
<div id="open-collapseOne" class="accordion-collapse collapse show">
<!-- No data-bs-parent attribute -->
<div class="accordion-body">
Content
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#open-collapseTwo">
Panel 2
</button>
</h2>
<div id="open-collapseTwo" class="accordion-collapse collapse">
<!-- No data-bs-parent attribute -->
<div class="accordion-body">
Content
</div>
</div>
</div>
</div>Note: To allow multiple accordion panels to be open simultaneously, remove the
data-bs-parent attribute from all collapse elements.Accordion with Icons
Styled Accordion with Icons
Learn how to get started with Bootstrap 5 installation and setup.
Understand Bootstrap's grid system and layout utilities.
Learn how to customize Bootstrap with SASS and CSS variables.
<!-- Accordion with icons -->
<div class="accordion" id="iconAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button d-flex justify-content-between align-items-center"
type="button"
data-bs-toggle="collapse"
data-bs-target="#icon-collapseOne">
<span>
<i class="bi bi-info-circle text-primary me-2"></i>
Getting Started
</span>
<i class="bi bi-chevron-down accordion-icon"></i>
</button>
</h2>
<div id="icon-collapseOne"
class="accordion-collapse collapse show"
data-bs-parent="#iconAccordion">
<div class="accordion-body">
Content
</div>
</div>
</div>
</div>
<!-- CSS for icon animation -->
<style>
.accordion-icon {
transition: transform 0.3s ease;
}
.accordion-button:not(.collapsed) .accordion-icon {
transform: rotate(180deg);
}
</style>Nested Accordion
Accordion Inside Accordion
Nested content for item 1.1
Nested content for item 1.2
Content for parent section 2
<!-- Nested accordion -->
<div class="accordion" id="parentAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#parent-collapseOne">
Parent Section
</button>
</h2>
<div id="parent-collapseOne"
class="accordion-collapse collapse show"
data-bs-parent="#parentAccordion">
<div class="accordion-body">
<!-- Nested accordion inside -->
<div class="accordion" id="nestedAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nested-collapseOne">
Nested Item
</button>
</h2>
<div id="nested-collapseOne"
class="accordion-collapse collapse show"
data-bs-parent="#nestedAccordion">
<div class="accordion-body">
Nested content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Real-World Examples
Practical Use Cases
FAQ Section
Click on the &qout;Sign Up&qout; button in the top right corner, fill in your details, and verify your email address.
We accept all major credit cards, PayPal, and bank transfers.
You can contact our support team via email at support@example.com or through our contact form.
Product Features
- End-to-end encryption
- Two-factor authentication
- Regular security audits
- Fast loading times
- Optimized for mobile
- CDN integration
- 24/7 live chat
- Phone support
- Comprehensive documentation
Setup Instructions
npm install bootstrap@5.3.0Import Bootstrap CSS and JS in your main file.
Customize variables in your SCSS file.
Documentation Sections
JavaScript API
JavaScript Methods and Events
| Method | Description | Example |
|---|---|---|
.show() | Shows accordion item | myCollapse.show() |
.hide() | Hides accordion item | myCollapse.hide() |
.toggle() | Toggles accordion item | myCollapse.toggle() |
.dispose() | Destroys accordion | myCollapse.dispose() |
Events
show.bs.collapse- Fires immediately when show is calledshown.bs.collapse- Fires when accordion item is visiblehide.bs.collapse- Fires immediately when hide is calledhidden.bs.collapse- Fires when accordion item is hidden
// JavaScript for accordion control
// Initialize accordion collapse
const collapseElement = document.getElementById('myCollapse');
const collapse = new bootstrap.Collapse(collapseElement, {
toggle: false // Don't toggle on initialization
});
// Show accordion item
collapse.show();
// Hide accordion item
collapse.hide();
// Toggle accordion item
collapse.toggle();
// Event handling
collapseElement.addEventListener('shown.bs.collapse', function () {
console.log('Accordion item was shown');
});
collapseElement.addEventListener('hidden.bs.collapse', function () {
console.log('Accordion item was hidden');
});
// Programmatically control all accordion items
function toggleAllAccordions(show = true) {
const accordionItems = document.querySelectorAll('.accordion-collapse');
accordionItems.forEach(item => {
const bsCollapse = new bootstrap.Collapse(item, {toggle: false});
if (show) {
bsCollapse.show();
} else {
bsCollapse.hide();
}
});
}
// Open specific accordion by ID
function openAccordionItem(itemId) {
const item = document.getElementById(itemId);
if (item) {
const bsCollapse = new bootstrap.Collapse(item, {toggle: false});
bsCollapse.show();
}
}
// Close all except specified
function closeOthers(keepOpenId) {
const allItems = document.querySelectorAll('.accordion-collapse');
allItems.forEach(item => {
if (item.id !== keepOpenId) {
const bsCollapse = bootstrap.Collapse.getInstance(item);
if (bsCollapse) {
bsCollapse.hide();
}
}
});
}Accessibility Features
Accessibility Best Practices
- Use proper heading structure (
h2for headers) - Add
aria-expandedattribute to buttons - Include
aria-controlsto link button with content - Use
aria-labelledbyfor screen readers - Ensure keyboard navigation works (Enter/Space to toggle)
- Test with screen readers
- Provide visual focus indicators
Custom Styling
Gradient Accordion
Beautiful gradient styled accordion.
Custom styling with gradients.
Rounded Accordion
Fully rounded accordion with custom borders.
Contemporary design with rounded corners.
/* Custom CSS for accordions */
.custom-accordion .accordion-button {
background: linear-gradient(45deg, #6a11cb, #2575fc);
color: white;
border: none;
}
.custom-accordion .accordion-button:not(.collapsed) {
background: linear-gradient(45deg, #2575fc, #6a11cb);
color: white;
}
.custom-accordion .accordion-button::after {
filter: invert(1);
}
.custom-accordion .accordion-item {
border: none;
margin-bottom: 10px;
border-radius: 10px;
overflow: hidden;
}
.rounded-accordion .accordion-item {
border-radius: 15px;
overflow: hidden;
margin-bottom: 15px;
border: 2px solid #dee2e6;
}
.rounded-accordion .accordion-button {
border-radius: 13px 13px 0 0;
}
.rounded-accordion .accordion-button.collapsed {
border-radius: 13px;
}
/* Custom animation */
.accordion-button::after {
transition: transform 0.3s ease-in-out;
}
.accordion-button:not(.collapsed)::after {
transform: rotate(-180deg);
}