Multi-target collapse in Bootsrap - Mini Project: Build & Apply

Multi-target Collapse with Bootstrap

📖 Scenario: You are creating a simple webpage with Bootstrap where clicking one button will show or hide multiple content sections at the same time. This is useful for menus or FAQs where you want to control several parts with one click.

🎯 Goal: Build a webpage with a button that toggles the visibility of two separate content boxes simultaneously using Bootstrap's multi-target collapse feature.

📋 What You'll Learn

Use Bootstrap 5 collapse component

Create a button that toggles two different collapsible content sections at once

Each collapsible section should have some visible text inside

Use semantic HTML and include necessary Bootstrap classes and attributes

Ensure the button has accessible labels

💡 Why This Matters

🌍 Real World

Multi-target collapse is useful in websites where you want one control to show or hide multiple content areas, like FAQs, menus, or dashboards.

💼 Career

Understanding Bootstrap's collapse component and accessibility best practices is valuable for front-end web developers building interactive and user-friendly interfaces.

1

Create the HTML skeleton with two collapsible content sections

Write the basic HTML structure with doctype, html with lang="en", head including meta charset="UTF-8" and viewport meta tag. Inside the body, create two div elements with id attributes collapseOne and collapseTwo. Each div should have the Bootstrap class collapse and contain some text: "Content for section one." and "Content for section two." respectively.

Bootsrap

  
  
  Multi-target Collapse
  


  

Need a hint?

Remember to add two div elements with id and collapse class inside the body. Each should have the exact text content.

2

Add a button to toggle both collapsible sections

Add a button element above the collapsible divs. Give it the Bootstrap classes btn and btn-primary. Add the attribute data-bs-toggle="collapse" and set data-bs-target="#collapseOne,#collapseTwo" to target both collapsible sections. The button text should be "Toggle Sections".

Bootsrap

  
  
  Multi-target Collapse
  


  
  
    Content for section one.
  
  
    Content for section two.
  

Need a hint?

Make sure the button has the correct Bootstrap classes and the data-bs-toggle and data-bs-target attributes targeting both #collapseOne and #collapseTwo.

3

Include Bootstrap JavaScript for collapse functionality

Add the Bootstrap JavaScript bundle by including a script tag before the closing </body> tag. Use the CDN link https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js. This enables the collapse toggle to work.

Bootsrap

  
  
  Multi-target Collapse
  


  
    Toggle Sections
  
  
    Content for section one.
  
  
    Content for section two.
  
  

Need a hint?

Include the Bootstrap JavaScript bundle just before the closing </body> tag to enable interactive components.

4

Add accessibility attributes to the toggle button

Enhance the toggle button by adding aria-expanded="false" and aria-controls="collapseOne collapseTwo" attributes. This helps screen readers understand the button controls the two collapsible sections.

Bootsrap

  
  
  Multi-target Collapse
  


  
  
    Toggle Sections
  
  
    Content for section one.
  
  
    Content for section two.
  
  

Need a hint?

Use aria-expanded="false" and aria-controls="collapseOne collapseTwo" on the button to improve accessibility.