Bootstrap 5.3 Accordion
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5.3 Accordion Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
<style>
.accordion-item {
margin-bottom: 15px;
}
.accordion-header {
background-color: #f8f9fa;
padding: 10px;
cursor: pointer;
position: relative;
}
.accordion-body {
background-color: #ffffff;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap 5.3 Accordion Example</h2>
<div id="accordion">
<div class="accordion-item">
<h3 class="accordion-header" id="headingOne" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Panel 1
</h3>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tristique tortor vel mi condimentum dictum. Curabitur efficitur, nisl ut ullamcorper consectetur, nunc nisi facilisis ante, vel aliquam neque nunc a sem. In eget pulvinar libero. Nulla facilisi.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header collapsed" id="headingTwo" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Panel 2
</h3>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordion">
<div class="accordion-body">
Sed vestibulum tincidunt tortor, id tincidunt mi. Sed nec nunc at lectus venenatis congue sed et dolor. Aenean eget vestibulum tortor. Sed id felis et mi tincidunt volutpat. Nulla facilisi. Vivamus congue justo in magna rhoncus cursus. Proin blandit justo vitae felis fermentum ullamcorper.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header collapsed" id="headingThree" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Panel 3
</h3>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordion">
<div class="accordion-body">
Nunc a cursus justo, at eleifend est. Fusce maximus massa vitae eros aliquam dictum.Proin fermentum velit eget tincidunt efficitur. Nam tincidunt metus nec dapibus interdum. Cras auctor, nunc eu interdum faucibus, urna elit sollicitudin sem, a luctus lectus justo nec neque. Etiam auctor purus nec tellus lacinia, eu lobortis sapien auctor. Quisque eget purus non mauris pharetra vestibulum. Nunc sed velit diam. Proin id libero finibus, tincidunt est ut, fermentum justo.
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Code Output
Bootstrap 5.3 Accordion Example
Panel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tristique tortor vel mi condimentum dictum. Curabitur efficitur, nisl ut ullamcorper consectetur, nunc nisi facilisis ante, vel aliquam neque nunc a sem. In eget pulvinar libero. Nulla facilisi.
Panel 2
Sed vestibulum tincidunt tortor, id tincidunt mi. Sed nec nunc at lectus venenatis congue sed et dolor. Aenean eget vestibulum tortor. Sed id felis et mi tincidunt volutpat. Nulla facilisi. Vivamus congue justo in magna rhoncus cursus. Proin blandit justo vitae felis fermentum ullamcorper.
Panel 3
Nunc a cursus justo, at eleifend est. Fusce maximus massa vitae eros aliquam dictum.Proin fermentum velit eget tincidunt efficitur. Nam tincidunt metus nec dapibus interdum. Cras auctor, nunc eu interdum faucibus, urna elit sollicitudin sem, a luctus lectus justo nec neque. Etiam auctor purus nec tellus lacinia, eu lobortis sapien auctor. Quisque eget purus non mauris pharetra vestibulum. Nunc sed velit diam. Proin id libero finibus, tincidunt est ut, fermentum justo.
Accordion
It allows you to create collapsible content sections. An Accordion consists of multiple collapsible panels, where only one panel can be expanded at a time. Each panel typically contains a heading and content that can be shown or hidden.