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.
Responsive Tailwind CSS Stepper Component
Dark Themed Bootstrap 5 Accordion with Custom Icons
Fully Responsive CSS Price Table Grid and Plan Details
Responsive TailwindCSS Footer with Gallery Section
Bootstrap 5 Alerts for Error, Warning, Info, and Success
Interactive MCQ Container with CSS & JavaScript
Responsive Tailwind CSS Testimonial Slider with Alpine.js Functionality
Bootstrap 5 Full Height Swiper Slider with Smooth Transitions
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
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
