Dropdown events and methods in Bootsrap - Mini Project: Build & Apply

Bootstrap Dropdown Events and Methods

📖 Scenario: You are building a simple webpage with a Bootstrap dropdown menu. You want to learn how to create the dropdown, configure it, and use JavaScript to listen for dropdown events and control it with methods.

🎯 Goal: Create a Bootstrap dropdown menu with three items. Add JavaScript code to listen for the dropdown's show.bs.dropdown event and log a message. Also, add a button that uses JavaScript to programmatically toggle the dropdown open and closed.

📋 What You'll Learn

Use Bootstrap 5 dropdown component

Create a dropdown menu with three items: Option 1, Option 2, Option 3

Add a JavaScript event listener for the dropdown's show.bs.dropdown event

Add a button that toggles the dropdown open and closed using Bootstrap's JavaScript methods

Ensure the dropdown is accessible with proper aria attributes

Make the page responsive and visually clear

💡 Why This Matters

🌍 Real World

Dropdown menus are common in websites for navigation, settings, and user actions. Knowing how to create and control them with Bootstrap and JavaScript helps build interactive and user-friendly interfaces.

💼 Career

Front-end developers often use Bootstrap components and JavaScript event handling to build responsive and accessible web applications. Understanding dropdown events and methods is essential for creating dynamic UI elements.

1

Create the basic Bootstrap dropdown HTML structure

Write the HTML code to create a Bootstrap dropdown menu with a button labeled Dropdown button and a menu containing three items: Option 1, Option 2, and Option 3. Use the classes dropdown, btn btn-secondary dropdown-toggle, and dropdown-menu as shown in Bootstrap 5 documentation. The dropdown button should have id="dropdownMenuButton" and data-bs-toggle="dropdown" attributes.

Bootsrap

Hint

Remember to use the Bootstrap classes exactly and add the data-bs-toggle="dropdown" attribute to the button.

2

Add a JavaScript variable to select the dropdown button

Add a JavaScript line that selects the dropdown button element by its id dropdownMenuButton and stores it in a constant called dropdownButton.

Bootsrap

  
    Dropdown button
  
  
    Option 1
    Option 2
    Option 3
  



// Your code here

Hint

Use document.getElementById with the exact id dropdownMenuButton.

3

Add an event listener for the dropdown's show event

Add JavaScript code that listens for the show.bs.dropdown event on the dropdownButton element. When the event fires, log the message "Dropdown is about to be shown" to the console.

Bootsrap

  
    Dropdown button
  
  
    Option 1
    Option 2
    Option 3
  



const dropdownButton = document.getElementById('dropdownMenuButton');
dropdownButton.addEventListener('show.bs.dropdown', () => {
  // Your code here
});

Hint

Use addEventListener on dropdownButton with event name show.bs.dropdown and inside the callback use console.log.

4

Add a button to toggle the dropdown using Bootstrap's JavaScript methods

Add a new button below the dropdown with the text Toggle Dropdown. Then add JavaScript code that creates a Bootstrap Dropdown instance for dropdownButton and toggles the dropdown open or closed when the new button is clicked.

Bootsrap

  
    Dropdown button
  
  
    Option 1
    Option 2
    Option 3
  

Toggle Dropdown


const dropdownButton = document.getElementById('dropdownMenuButton');
dropdownButton.addEventListener('show.bs.dropdown', () => {
  console.log('Dropdown is about to be shown');
});

// Your code here

Hint

Create a button with id="toggleBtn". Use bootstrap.Dropdown.getOrCreateInstance to get the dropdown instance. Add a click event listener on toggleBtn that calls dropdownInstance.toggle().

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