Dropdown events and methods in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Which event triggers when a Bootstrap dropdown menu is about to be shown?

Bootstrap dropdowns have specific events that fire at different stages. Which event name corresponds to the moment just before the dropdown menu becomes visible?

A hide.bs.dropdown

B show.bs.dropdown

C hidden.bs.dropdown

D shown.bs.dropdown

💡 Hint

Think about the event that happens right before the dropdown appears, not after.

The show.bs.dropdown event fires just before the dropdown menu is shown. The shown.bs.dropdown event fires after it is fully visible.

📝 Syntax

intermediate

What is the correct jQuery method to programmatically toggle a Bootstrap dropdown?

You want to open or close a Bootstrap dropdown menu using JavaScript. Which jQuery method call correctly toggles the dropdown on an element with id 'myDropdown'?

Bootsrap

$('#myDropdown')._____('toggle');

A dropdown

B toggleDropdown

C show

D open

💡 Hint

Bootstrap dropdowns use a specific method name matching the component name.

The correct method is dropdown('toggle'). Other options are not valid Bootstrap dropdown methods.

❓ rendering

advanced

What will be the visible result after this code runs?

Given this HTML and JavaScript, what will the user see after clicking the button once?

Bootsrap

<button id="menuBtn" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Menu</button>
<ul class="dropdown-menu" aria-labelledby="menuBtn">
  <li><a class="dropdown-item" href="#">Item 1</a></li>
  <li><a class="dropdown-item" href="#">Item 2</a></li>
</ul>

<script>
  const btn = document.getElementById('menuBtn');
  btn.addEventListener('shown.bs.dropdown', () => {
    alert('Dropdown is now visible');
  });
</script>

A The dropdown menu opens and an alert box says 'Dropdown is now visible'.

B The dropdown menu opens but no alert appears.

C Nothing happens when clicking the button.

D An error occurs because 'shown.bs.dropdown' is not a valid event.

💡 Hint

The event 'shown.bs.dropdown' fires after the dropdown is fully shown.

Clicking the button toggles the dropdown open. The event listener triggers an alert after the menu is visible.

❓ selector

advanced

Which CSS selector targets only the visible dropdown menu in Bootstrap?

Bootstrap adds the class 'show' to dropdown menus when they are visible. Which selector correctly selects only visible dropdown menus?

A .dropdown-menu:visible

B .dropdown-menu.active

C .dropdown-menu[aria-expanded="true"]

D .dropdown-menu.show

💡 Hint

Bootstrap uses the 'show' class to indicate visible dropdown menus.

The class show is added to the dropdown menu when visible. The selector .dropdown-menu.show matches only visible menus.

Option D is invalid CSS, option D targets the toggle button, and option D is not used by Bootstrap for dropdown visibility.

❓ accessibility

expert

What ARIA attribute must be updated when a Bootstrap dropdown menu is toggled for accessibility?

To help screen readers understand if a dropdown menu is open or closed, which ARIA attribute on the toggle button should be updated dynamically?

A aria-pressed

B aria-hidden

C aria-expanded

D aria-label

💡 Hint

This attribute indicates whether an element is expanded or collapsed.

The aria-expanded attribute on the dropdown toggle button should be set to true when the menu is open and false when closed. This helps screen readers announce the state.

Practice

1. Which Bootstrap dropdown event is triggered just before the dropdown menu is shown?

easy

A. hidden.bs.dropdown

B. shown.bs.dropdown

C. hide.bs.dropdown

D. show.bs.dropdown

Solution

1. Step 1: Understand dropdown event timing

   The show.bs.dropdown event fires just before the dropdown menu appears.

2. Step 2: Differentiate from other events

   shown.bs.dropdown fires after showing; hide.bs.dropdown and hidden.bs.dropdown relate to closing.

3. Final Answer:

   show.bs.dropdown -> Option D

4. Quick Check:

   Event before showing = show.bs.dropdown [OK]

Hint: Events ending with .bs.dropdown show dropdown states [OK]

Common Mistakes:

• Confusing 'show' and 'shown' events
• Mixing show and hide events
• Assuming event fires after dropdown is visible

2. Which JavaScript method correctly opens a Bootstrap dropdown programmatically?

easy

A. dropdown.toggle()

B. dropdown.open()

C. dropdown.show()

D. dropdown.display()

Solution

1. Step 1: Recall Bootstrap dropdown methods

   The method toggle() toggles the dropdown menu open or closed programmatically.

2. Step 2: Eliminate incorrect methods

   open() and display() are not Bootstrap dropdown methods; show() is not a method on the dropdown instance.

3. Final Answer:

   dropdown.toggle() -> Option A

4. Quick Check:

   Open dropdown = toggle() method [OK]

Hint: Use toggle() to open or close dropdown programmatically [OK]

Common Mistakes:

• Using show() which does not exist
• Assuming open() method exists
• Confusing toggle() with show()

3. What will be logged to the console when this code runs?

const dropdownElement = document.querySelector('#myDropdown');
const dropdown = bootstrap.Dropdown.getOrCreateInstance(dropdownElement);
dropdownElement.addEventListener('shown.bs.dropdown', () => console.log('Dropdown opened'));
dropdown.show();

medium

A. Dropdown opened

B. No output

C. Error: dropdown.show is not a function

D. Dropdown closed

Solution

1. Step 1: Understand event listener setup

   The code listens for the shown.bs.dropdown event and logs 'Dropdown opened' when fired.

2. Step 2: Analyze dropdown.show() effect

   Calling dropdown.show() opens the dropdown and triggers the shown.bs.dropdown event, causing the log.

3. Final Answer:

   Dropdown opened -> Option A

4. Quick Check:

   shown.bs.dropdown triggers console log [OK]

Hint: shown.bs.dropdown fires after show() completes [OK]

Common Mistakes:

• Expecting output before dropdown opens
• Confusing show() with toggle()
• Missing event listener setup

4. Identify the error in this code snippet that tries to hide a Bootstrap dropdown:

const dropdownElement = document.querySelector('#menu');
const dropdown = new bootstrap.Dropdown(dropdownElement);
dropdown.close();

medium

A. Using 'new' keyword instead of getOrCreateInstance

B. Selecting element with wrong ID

C. Calling close() method which does not exist

D. Missing event listener for hide event

Solution

1. Step 1: Check Bootstrap dropdown methods

   Bootstrap dropdown does not have a close() method; it uses toggle() or dispose().

2. Step 2: Verify object creation

   Using new bootstrap.Dropdown() is valid; the error is not here.

3. Final Answer:

   Calling close() method which does not exist -> Option C

4. Quick Check:

   close() method is invalid for Bootstrap dropdown [OK]

Hint: Bootstrap dropdown has no close(), use toggle() or dispose() [OK]

Common Mistakes:

• Assuming close() method exists
• Confusing close() with jQuery methods
• Thinking new keyword causes error

5. You want to run a function only after a Bootstrap dropdown has fully closed. Which event should you listen to, and how do you programmatically close the dropdown?

hard

A. Listen to hide.bs.dropdown event and call dropdown.toggle()

B. Listen to hidden.bs.dropdown event and call dropdown.hide()

C. Listen to hidden.bs.dropdown event and call dropdown.toggle()

D. Listen to hidden.bs.dropdown event and call dropdown.dispose()

Solution

1. Step 1: Identify event after dropdown closes

   The hidden.bs.dropdown event fires after the dropdown is fully closed.

2. Step 2: Choose method to close dropdown programmatically

   Use dropdown.hide() to close the dropdown menu.

3. Final Answer:

   Listen to hidden.bs.dropdown event and call dropdown.hide() -> Option B

4. Quick Check:

   Close dropdown with hide(), detect close with hidden.bs.dropdown [OK]

Hint: Use hidden.bs.dropdown event and hide() to close dropdown [OK]

Common Mistakes:

• Listening to hide.bs.dropdown instead of hidden.bs.dropdown
• Using toggle() which toggles state instead of specifically closing
• Calling dispose() which removes dropdown instance