Bootstrap 5 Accordion with Expand and Collapse Icons
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Bootstrap 5 Accordion With Plus Minus</title>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'>
<style>
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap');
body {
font-family: 'Sen', sans-serif;
}
#accordion-list {
border: 1px solid #ddd;
}
.accordion-item {
position: relative;
}
.accordion-button:not(.collapsed) {
color: #333;
background-color: #b2dfdb;
box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}
.accordion-button:not(.collapsed)::after,
.accordion-button::after {
width: auto;
height: auto;
background-image: none;
position: absolute;
right: 15px;
top: 13px;
font-size: 24px;
}
.accordion-button::after {
content: "+";
font-weight: 100;
color: #1b6ce5;
transform: translateY(-4px);
top: 20px;
}
.accordion-button:not(.collapsed)::after {
content: "-";
transform: translate(-5px, -4px);
transform: rotate(0deg);
}
</style>
</head>
<body>
<section class="mt-5">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h1>Bootstrap 5 Accordion With Plus Minus</h1>
<div class="accordion accordion-flush" id="accordion-list">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#accordion-content-1">
Accordion Heading 1
</button>
</h2>
<div id="accordion-content-1" class="accordion-collapse collapse"
data-bs-parent="#accordion-list">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</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="#accordion-content-2">
Accordion Heading 2
</button>
</h2>
<div id="accordion-content-2" class="accordion-collapse collapse"
data-bs-parent="#accordion-list">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</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="#accordion-content-3">
Accordion Heading 3
</button>
</h2>
<div id="accordion-content-3" class="accordion-collapse collapse"
data-bs-parent="#accordion-list">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</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="#accordion-content-4">
Accordion Heading 4
</button>
</h2>
<div id="accordion-content-4" class="accordion-collapse collapse"
data-bs-parent="#accordion-list">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</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="#accordion-content-5">
Accordion Heading 5
</button>
</h2>
<div id="accordion-content-5" class="accordion-collapse collapse"
data-bs-parent="#accordion-list">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</body>
</html>
/* Doesn't require any CSS. */
//Doesn't require any JS.
This Bootstrap 5 snippet provides a visually appealing and interactive accordion component with expand and collapse icons. The accordion allows users to easily reveal or hide additional content sections, providing a compact and organized way to present information.
Key Features:
- Responsive Design: The accordion adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices.
- Customizable Styling: Easily modify the appearance of the accordion using Bootstrap's CSS classes to match your website's design and branding.
- Expand and Collapse Icons: Visual icons clearly indicate whether a section is expanded or collapsed, providing a user-friendly interface.
- Smooth Animations: The accordion incorporates smooth animations when sections are expanded or collapsed, enhancing the user experience.
- Content Flexibility: Each accordion section can contain any type of content, such as text, images, or other HTML elements.
Implementation:
- Include Bootstrap 5: Ensure you have Bootstrap 5 installed and configured in your project.
- Create the HTML Structure: Set up the basic HTML structure for the accordion, including the container, accordion items, headers, and content sections.
- Apply Bootstrap Classes: Use Bootstrap's CSS classes to style the accordion and its elements, such as accordion, accordion-item, accordion-header, accordion-body, accordion-collapse, and any other relevant classes.
Stylish Contact Form with Image in Tailwind CSS
Responsive Registration Form with Image in Tailwind CSS
Bootstrap 5 Payment Method Form Page with Invoice
Modern Pricing Table Design with Bootstrap 4
Responsive Multi-Level Drop-Down Navigation Menu in CSS
Interactive Bottom Navigation Bar Indicator with CSS
Real-time Password Strength Indicator in Bootstrap 5
Responsive Video Card Component for Tailwind CSS
Responsive Feature Highlight Component with Tailwind CSS
Multi-Step Form with International Phone Input and Nice Select
Responsive Review Cards Component with CSS3
Responsive CSS3 Timeline Design With Hover Effects
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
