Collapse toggle via JavaScript in Bootsrap - Mini Project: Build & Apply

Collapse Toggle with Bootstrap and JavaScript

📖 Scenario: You are building a simple webpage with a section that can be shown or hidden by clicking a button. This is common for FAQs or menus.

🎯 Goal: Create a Bootstrap collapse component that toggles open and closed when the user clicks a button. Use JavaScript to control the toggle instead of data attributes.

📋 What You'll Learn

Use Bootstrap 5 CSS and JS via CDN

Create a button with id toggleButton

Create a collapsible content section with id collapseContent

Use JavaScript to toggle the collapse when the button is clicked

Ensure the collapse toggles smoothly and is accessible

💡 Why This Matters

🌍 Real World

Collapsible sections are common in FAQs, menus, and dashboards to save space and improve user experience.

💼 Career

Knowing how to control Bootstrap components with JavaScript and ensure accessibility is essential for front-end web development roles.

1

Setup HTML structure with Bootstrap CSS and JS

Create a basic HTML5 page with Bootstrap 5 CSS and JS linked via CDN. Inside the <body>, add a <button> with id toggleButton and a <div> with id collapseContent and class collapse. The div should contain the text Hidden content here.

Bootsrap

    
    
    Bootstrap Collapse Toggle
    
    


    

Hint

Remember to include Bootstrap CSS and JS from CDN. Create a button with id toggleButton and a div with id collapseContent and class collapse.

2

Add JavaScript variable for collapse element

Add a JavaScript line after the Bootstrap JS script that creates a variable called collapseElement which selects the element with id collapseContent.

Bootsrap

    
    
    Bootstrap Collapse Toggle
    
    


    Toggle Content
    
        Hidden content here
    
    
    
    
    // Your code here
    

Hint

Use document.getElementById('collapseContent') to select the collapsible div and assign it to collapseElement.

3

Create Bootstrap Collapse instance and add button click event

Inside the existing <script> tag, create a Bootstrap Collapse instance called bsCollapse using new bootstrap.Collapse(collapseElement, { toggle: false }). Then add a click event listener to the button with id toggleButton that calls bsCollapse.toggle() to open or close the collapse.

Bootsrap

    
    
    Bootstrap Collapse Toggle
    
    


    Toggle Content
    
        Hidden content here
    
    
    
    
    const collapseElement = document.getElementById('collapseContent');
    // Your code here
    

Hint

Create a new Bootstrap Collapse instance with toggle: false to prevent auto toggling. Add a click event listener on the button that calls bsCollapse.toggle().

4

Add ARIA attributes for accessibility

Add the attribute aria-expanded="false" to the button with id toggleButton. Then, inside the click event listener, update the button's aria-expanded attribute to true if the collapse is shown, or false if it is hidden. Use collapseElement.classList.contains('show') to check if the content is visible.

Bootsrap

    
    
    Bootstrap Collapse Toggle
    
    


    Toggle Content
    
        Hidden content here
    
    
    
    
    const collapseElement = document.getElementById('collapseContent');
    const bsCollapse = new bootstrap.Collapse(collapseElement, { toggle: false });
    document.getElementById('toggleButton').addEventListener('click', () => {
        bsCollapse.toggle();
        // Your code here
    });
    

Hint

Add aria-expanded="false" to the button in HTML. In JavaScript, update this attribute inside the click event by checking if the collapse has the show class.

Practice

1. What does the toggle() method do when used with new bootstrap.Collapse(element) in Bootstrap?

easy

A. It reloads the entire page.

B. It shows the hidden content if collapsed, or hides it if shown.

C. It permanently disables the collapse functionality.

D. It changes the color of the collapsed content.

Solution

1. Step 1: Understand the collapse object

   The new bootstrap.Collapse(element) creates a controller for the collapsible content.

2. Step 2: Role of toggle() method

   The toggle() method switches the content between visible and hidden states smoothly.

3. Final Answer:

   It shows the hidden content if collapsed, or hides it if shown. -> Option B

4. Quick Check:

   toggle() switches collapse state [OK]

Hint: toggle() flips collapse open or closed [OK]

Common Mistakes:

• Thinking toggle disables collapse
• Confusing toggle with page reload
• Assuming toggle changes styles only

2. Which of the following is the correct way to create a Bootstrap collapse instance for an element with id myCollapse in JavaScript?

easy

A. const collapse = new bootstrap.Collapse('myCollapse');

B. const collapse = bootstrap.Collapse('#myCollapse');

C. const collapse = new bootstrap.Collapse(document.getElementById('myCollapse'));

D. const collapse = new Collapse('myCollapse');

Solution

1. Step 1: Identify the element reference

   The Bootstrap Collapse constructor requires a DOM element, not a selector string.

2. Step 2: Correct syntax for element selection

   Using document.getElementById('myCollapse') returns the element to pass to the constructor.

3. Final Answer:

   const collapse = new bootstrap.Collapse(document.getElementById('myCollapse')); -> Option C

4. Quick Check:

   Pass DOM element, not selector string [OK]

Hint: Use getElementById to pass element, not string [OK]

Common Mistakes:

• Passing selector string instead of element
• Omitting 'new' keyword
• Using undefined Collapse without bootstrap prefix

3. Given the following code, what will be the visible state of the collapsible content after the button is clicked once?

const collapse = new bootstrap.Collapse(document.getElementById('content'), { toggle: false });
document.getElementById('toggleBtn').addEventListener('click', () => {
  collapse.toggle();
});

The content is initially hidden.

medium

A. The content will become visible.

B. The content will remain hidden.

C. The content will be removed from the DOM.

D. An error will occur because toggle is false.

Solution

1. Step 1: Understand initial state and options

   The content starts hidden and toggle: false means it won't auto-toggle on creation.

2. Step 2: Effect of calling toggle() on click

   Calling toggle() manually switches the state, so hidden content becomes visible.

3. Final Answer:

   The content will become visible. -> Option A

4. Quick Check:

   Manual toggle() shows hidden content [OK]

Hint: toggle() always flips visibility regardless of options [OK]

Common Mistakes:

• Thinking toggle:false disables toggle() method
• Assuming content stays hidden without auto toggle
• Confusing toggle() with remove()

4. Identify the error in this code snippet that tries to toggle a Bootstrap collapse:

const collapse = new bootstrap.Collapse('content');
document.getElementById('btn').addEventListener('click', () => {
  collapse.toggle();
});

medium

A. The selector 'content' should be a DOM element, not a string.

B. The toggle() method is not available on collapse instances.

C. The event listener is attached to the wrong element.

D. Missing parentheses when calling toggle.

Solution

1. Step 1: Check constructor argument

   The constructor expects a DOM element, but 'content' is a string selector, which is incorrect.

2. Step 2: Correct way to pass element

   Use document.getElementById('content') to get the element before passing it.

3. Final Answer:

   The selector 'content' should be a DOM element, not a string. -> Option A

4. Quick Check:

   Pass DOM element, not string selector [OK]

Hint: Always pass DOM element, not string selector [OK]

Common Mistakes:

• Passing string selector instead of element
• Assuming toggle() is unavailable
• Incorrect event listener target

5. You want to toggle a Bootstrap collapse and update the button text between 'Show' and 'Hide' accordingly. Which JavaScript code correctly achieves this?

const collapse = new bootstrap.Collapse(document.getElementById('panel'), { toggle: false });
const btn = document.getElementById('toggleBtn');
btn.addEventListener('click', () => {
  collapse.toggle();
  if (btn.textContent === 'Show') {
    btn.textContent = 'Hide';
  } else {
    btn.textContent = 'Show';
  }
});

hard

A. The collapse instance must be recreated inside the click event.

B. The button text update should happen before calling toggle().

C. You must use btn.innerHTML instead of textContent.

D. This code works correctly to toggle and update button text.

Solution

1. Step 1: Check toggle and button text update order

   The code calls collapse.toggle() then updates the button text based on current text, which is logical.

2. Step 2: Validate textContent usage and event setup

   Using textContent is correct for plain text updates, and the collapse instance is created once outside the event.

3. Final Answer:

   This code works correctly to toggle and update button text. -> Option D

4. Quick Check:

   Toggle then update textContent works [OK]

Hint: Toggle first, then update button text [OK]

Common Mistakes:

• Updating text before toggle causing mismatch
• Using innerHTML unnecessarily
• Recreating collapse instance on every click