Core Code
Core Code Modern Dev Handbook

Multiple Collapse Targets

Toggle multiple collapse elements using a single button.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container py-5">

<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
Toggle Sections
</button>

<div class="collapse multi-collapse mt-3">
<div class="card card-body">
First collapsible section.
</div>
</div>

<div class="collapse multi-collapse mt-3">
<div class="card card-body">
Second collapsible section.
</div>
</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

More BS5 Collapse & Accordion Examples (7)

example Basic Collapse open example example Collapse with Link Trigger open example example Basic Accordion open example example Flush Accordion open example example Accordion Without Parent open example example FAQ Accordion Example open example example Collapse Card Section open example