Collapse toggle via JavaScript in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does Bootstrap's collapse toggle work via JavaScript?

Which JavaScript method correctly toggles a Bootstrap collapse element with id myCollapse?

A var collapseElement = document.getElementById('myCollapse'); var bsCollapse = bootstrap.Collapse.getInstance(collapseElement); bsCollapse.toggle();

B var collapseElement = document.getElementById('myCollapse'); var bsCollapse = new bootstrap.Collapse(collapseElement, { toggle: true });

C var collapseElement = document.getElementById('myCollapse'); bootstrap.Collapse.toggle(collapseElement);

D var collapseElement = document.getElementById('myCollapse'); collapseElement.toggle();

💡 Hint

Remember to create a new Bootstrap Collapse instance with the element and options.

Option B creates a new Bootstrap Collapse instance with the element and sets toggle: true to toggle the collapse immediately.

Option B is invalid because toggle is not a static method on bootstrap.Collapse.

Option B tries to get an instance before creating one, which returns null if none exists.

Option B calls toggle() directly on the DOM element, which is not a valid method.

📝 Syntax

intermediate

Identify the syntax error in this Bootstrap collapse toggle code

What error will this code produce?

var collapseElement = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(collapseElement { toggle: true });

Bootsrap

var collapseElement = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(collapseElement { toggle: true });

A SyntaxError: missing comma between arguments

B TypeError: collapseElement is not a function

C ReferenceError: bootstrap is not defined

D No error, code runs correctly

💡 Hint

Check the syntax of the arguments passed to the constructor.

The code is missing a comma between collapseElement and the options object { toggle: true }. This causes a SyntaxError.

Option A is incorrect because collapseElement is a DOM element, not a function.

Option A would occur if Bootstrap JS was not loaded, but here the syntax error happens first.

Option A is false because the code has a syntax error.

❓ rendering

advanced

What is the visible result after toggling a Bootstrap collapse element via JavaScript?

Given this HTML:

<div id="myCollapse" class="collapse">Content</div>

And this JavaScript:

var collapseElement = document.getElementById('myCollapse'); var bsCollapse = new bootstrap.Collapse(collapseElement, { toggle: true });

What will the user see in the browser?

Bootsrap

<div id="myCollapse" class="collapse">Content</div>

A The page reloads and the content is visible.

B The content remains hidden with no change.

C The content disappears immediately with no animation.

D The content inside the div becomes visible with a smooth slide down animation.

💡 Hint

Bootstrap collapse toggles visibility with animation.

When toggled, Bootstrap adds classes to show the content with a smooth slide down animation.

Option D is incorrect because toggle:true triggers showing the content.

Option D is incorrect because Bootstrap uses animation, not immediate disappearance.

Option D is incorrect because no page reload occurs.

❓ selector

advanced

Which selector correctly targets all Bootstrap collapse elements on the page?

You want to toggle all collapse elements on the page using JavaScript. Which selector will select all elements with the Bootstrap collapse class?

A document.querySelectorAll('.collapse')

B document.getElementsByClassName('collapse')

C document.querySelectorAll('#collapse')

D document.getElementsByTagName('collapse')

💡 Hint

Use a CSS class selector to select multiple elements.

Option A uses querySelectorAll with the class selector .collapse, which selects all elements with that class.

Option A also selects elements by class but returns an HTMLCollection, which is live and less flexible than NodeList.

Option A tries to select by id #collapse, which selects only one element with that id.

Option A tries to select elements by tag name collapse, which is invalid because no such tag exists.

❓ accessibility

expert

Which ARIA attribute is essential for accessibility when toggling a Bootstrap collapse element?

When toggling a collapsible section, which ARIA attribute should be updated on the toggle button to reflect the expanded state?

A aria-hidden

B aria-checked

C aria-expanded

D aria-label

💡 Hint

This attribute tells screen readers if the section is open or closed.

aria-expanded is used on the toggle button to indicate whether the collapsible content is currently expanded (true) or collapsed (false).

aria-hidden is used on the content to indicate visibility but is not updated on the toggle button.

aria-checked is for checkboxes and similar controls.

aria-label provides a label but does not indicate expanded state.

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