0
0
Bootsrapmarkup~5 mins

Multi-target collapse in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Multi-target collapse lets you open or close several sections at once with one click. It helps keep your page tidy and easy to use.

You want to show or hide multiple menus or panels together.
You have a list of FAQs and want to open several answers at once.
You want a button to control multiple content areas for better user experience.
You want to save space by collapsing many parts of the page at the same time.
You want to create a dashboard where sections expand or collapse together.
Syntax
Bootsrap
<button data-bs-toggle="collapse" data-bs-target="#id1,#id2">Toggle</button>

<div id="id1" class="collapse">Content 1</div>
<div id="id2" class="collapse">Content 2</div>
Use data-bs-toggle="collapse" on the button to enable collapse behavior.
Use data-bs-target with a comma-separated list of IDs to control multiple elements.
Examples
This button toggles two panels open or closed at the same time.
Bootsrap
<button data-bs-toggle="collapse" data-bs-target="#panel1,#panel2">Toggle Panels</button>

<div id="panel1" class="collapse">Panel 1 content</div>
<div id="panel2" class="collapse">Panel 2 content</div>
Using Bootstrap button styles with multi-target collapse for better look and feel.
Bootsrap
<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#sectionA,#sectionB">Show/Hide Sections</button>

<div id="sectionA" class="collapse">Section A details</div>
<div id="sectionB" class="collapse">Section B details</div>
Sample Program

This example shows a green button that toggles two content sections open or closed at the same time. The sections have borders and padding for clarity. The button uses Bootstrap styles for a nice look. The aria-label attributes help screen readers understand the sections.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Multi-target Collapse Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container py-4">
    <h1>Multi-target Collapse Demo</h1>
    <button class="btn btn-success mb-3" data-bs-toggle="collapse" data-bs-target="#info1,#info2">
      Toggle Info Sections
    </button>

    <section id="info1" class="collapse border p-3 mb-2" aria-label="Information section 1">
      <strong>Info Section 1:</strong> This is the first collapsible content area.
    </section>

    <section id="info2" class="collapse border p-3" aria-label="Information section 2">
      <strong>Info Section 2:</strong> This is the second collapsible content area.
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OutputSuccess
Important Notes

Make sure each collapsible element has a unique ID.

Use aria-label or other ARIA attributes to improve accessibility.

Bootstrap's JavaScript must be included for collapse to work.

Summary

Multi-target collapse lets one button open or close many sections at once.

Use data-bs-target with multiple IDs separated by commas.

Always include Bootstrap's CSS and JS for this feature to work.