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.
Join Our Community Call-to-Action Banner Section With Tailwind CSS
Bootstrap 5 Responsive Service Pricing Table Block
Owl Carousel Responsive CSS-Only Team Section Showcase
Tailwind CSS Subscribe Container with Integrated Footer
Responsive Bootstrap 5 Detailed Features Section
Responsive CSS-Only Glassmorphism Login Form with background image
Responsive Tailwind CSS Hero Section and Adaptive Navbar
Responsive Bootstrap 5 Compact FAQ Accordion Display
Responsive CSS Only Services Section with Hover Effects
Responsive Tailwind CSS Team Members Display Showcase
Responsive Bootstrap 5 Clear Process Flow Component
Responsive Interactive Login & Register Form with CSS & JS Transitions
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
