Dropdown events and methods in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to show the dropdown menu when the button is clicked.

Bootsrap

<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="[1]" aria-expanded="false">
  Dropdown button
</button>

Drag options to blanks, or click blank then click option'

Acollapse

Bmodal

Cdropdown

Dtooltip

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal' or 'collapse' instead of 'dropdown' will not open the dropdown menu.

Forgetting the 'data-bs-toggle' attribute will prevent the dropdown from working.

The attribute data-bs-toggle="dropdown" tells Bootstrap to toggle the dropdown menu when the button is clicked.

2fill in blank

medium

Complete the code to listen for the event when the dropdown menu is about to be shown.

Bootsrap

var dropdownElement = document.getElementById('dropdownMenuButton');
dropdownElement.addEventListener('[1]', function (event) {
  console.log('Dropdown is about to be shown');
});

Drag options to blanks, or click blank then click option'

Ashown.bs.dropdown

Bhidden.bs.dropdown

Chide.bs.dropdown

Dshow.bs.dropdown

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'shown.bs.dropdown' will fire after the menu is shown, not before.

Using 'hide.bs.dropdown' or 'hidden.bs.dropdown' are for hiding events.

The event show.bs.dropdown fires just before the dropdown menu is shown.

3fill in blank

hard

Fix the error in the code to programmatically hide the dropdown menu.

Bootsrap

var dropdownElement = document.getElementById('dropdownMenuButton');
var dropdown = bootstrap.Dropdown.getInstance(dropdownElement);
dropdown.[1]();

Drag options to blanks, or click blank then click option'

Atoggle

Bhide

Cshow

Dopen

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'open()' is not a valid Bootstrap dropdown method.

Using 'show()' will open the dropdown instead of hiding it.

The method hide() closes the dropdown menu programmatically.

4fill in blank

hard

Fill both blanks to create a dropdown and listen for when it has fully hidden.

Bootsrap

<button class="btn btn-secondary dropdown-toggle" type="button" id="menuBtn" data-bs-toggle="[1]" aria-expanded="false">
  Menu
</button>

<script>
  var btn = document.getElementById('menuBtn');
  btn.addEventListener('[2]', function () {
    alert('Dropdown has fully hidden');
  });
</script>

Drag options to blanks, or click blank then click option'

Adropdown

Bshow.bs.dropdown

Chidden.bs.dropdown

Dhide.bs.dropdown

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hide.bs.dropdown' fires before the dropdown is hidden, not after.

Using 'show.bs.dropdown' is for showing, not hiding.

Use data-bs-toggle="dropdown" to enable dropdown toggling. The event hidden.bs.dropdown fires after the dropdown is fully hidden.

5fill in blank

hard

Fill all three blanks to create a dropdown, listen for when it is shown, and programmatically toggle it.

Bootsrap

<button class="btn btn-info dropdown-toggle" type="button" id="toggleBtn" data-bs-toggle="[1]" aria-expanded="false">
  Toggle Dropdown
</button>

<script>
  var toggleBtn = document.getElementById('toggleBtn');
  toggleBtn.addEventListener('[2]', function () {
    console.log('Dropdown is now shown');
  });
  var dropdownInstance = bootstrap.Dropdown.getOrCreateInstance(toggleBtn);
  dropdownInstance.[3]();
</script>

Drag options to blanks, or click blank then click option'

Adropdown

Bshown.bs.dropdown

Ctoggle

Dhide

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hide()' will close the dropdown instead of toggling it.

Using 'show.bs.dropdown' event fires before showing, not after.

Use data-bs-toggle="dropdown" to enable dropdown toggling. Listen for shown.bs.dropdown event after the dropdown is shown. Use toggle() method to open or close the dropdown programmatically.

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