Dropdown events and methods in Bootsrap - Browser Rendering Trace

Render Flow - Dropdown events and methods

Load HTML with dropdown markup

↓

Bootstrap JS initializes dropdown

↓

Attach event listeners for dropdown toggle

↓

User clicks toggle button

↓

Bootstrap triggers 'show.bs.dropdown' event

↓

Dropdown menu becomes visible

↓

Bootstrap triggers 'shown.bs.dropdown' event

↓

User clicks outside or toggle again

↓

Bootstrap triggers 'hide.bs.dropdown' event

↓

Dropdown menu hides

↓

Bootstrap triggers 'hidden.bs.dropdown' event

The browser loads the dropdown HTML and Bootstrap JavaScript attaches event listeners. When the user interacts, Bootstrap triggers specific events and shows or hides the dropdown menu accordingly.

Render Steps - 3 Steps

Code Added:Bootstrap JS attaches event listeners to dropdown toggle button

Before

[Dropdown button]
(No menu visible)

→

After

[Dropdown button]
(Menu hidden, ready to open)

Bootstrap JavaScript prepares the dropdown toggle button to respond to clicks by attaching event listeners.

🔧 Browser Action:Parses JS, attaches event handlers to toggle button

Code Sample

A Bootstrap dropdown button that toggles a menu with three clickable items.

Bootsrap

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Render Quiz - 3 Questions

After clicking the dropdown toggle button (render_step 2), what do you see?

A Nothing changes, the menu stays hidden

B The dropdown menu appears below the button with list items visible

C The button disappears

D The page reloads

Common Confusions - 3 Topics

Why doesn't the dropdown menu open when I click the button?

Bootstrap's JavaScript must be loaded and initialized. Without it, the toggle button won't respond to clicks (see render_step 1).

💡 Make sure Bootstrap JS is included and no JavaScript errors appear in the console.

Why does the dropdown close immediately after opening?

Clicking outside the dropdown or on the toggle again triggers the 'hide.bs.dropdown' event, closing the menu (see render_step 3).

💡 Dropdown closes on outside clicks or toggle clicks to keep UI clean.

How can I run code right after the dropdown opens?

Use the 'shown.bs.dropdown' event to run code after the menu is fully visible (between render_step 2 and 3).

💡 Listen for 'shown.bs.dropdown' to safely manipulate dropdown content.

Property Reference

Event/Method	Type	When It Happens / Use	Effect / Purpose
show.bs.dropdown	Event	Before dropdown menu is shown	Can be used to run code before menu appears
shown.bs.dropdown	Event	After dropdown menu is fully shown	Good for focusing elements or animations
hide.bs.dropdown	Event	Before dropdown menu is hidden	Can cancel hiding or run cleanup
hidden.bs.dropdown	Event	After dropdown menu is fully hidden	Good for resetting states
.dropdown('toggle')	Method	Programmatically toggle dropdown	Opens if closed, closes if open
.dropdown('show')	Method	Programmatically show dropdown	Opens the dropdown menu
.dropdown('hide')	Method	Programmatically hide dropdown	Closes the dropdown menu

Concept Snapshot

Bootstrap dropdowns use JavaScript events to control menu visibility. Key events: show.bs.dropdown (before open), shown.bs.dropdown (after open), hide.bs.dropdown (before close), hidden.bs.dropdown (after close). Methods: 'toggle' switches state, 'show' opens, 'hide' closes. Dropdown menus appear below toggle buttons and close on outside clicks. Ensure Bootstrap JS is loaded for dropdowns to work.

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