Bird
Raised Fist0
Bootsrapmarkup~5 mins

Dropdown events and methods in Bootsrap - Cheat Sheet & Quick Revision

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Recall & Review
beginner
What event is fired just before a Bootstrap dropdown menu is shown?
The show.bs.dropdown event is fired just before the dropdown menu is shown. It allows you to run code or prevent the menu from opening.
Click to reveal answer
beginner
How do you programmatically open a Bootstrap dropdown menu using JavaScript?
You can open a dropdown by calling the show() method on the dropdown instance, for example: var dropdown = new bootstrap.Dropdown(element); dropdown.show();
Click to reveal answer
beginner
Which event is triggered after a Bootstrap dropdown menu has been fully hidden?
The hidden.bs.dropdown event is triggered after the dropdown menu has been completely hidden from view.
Click to reveal answer
beginner
What method would you use to toggle the visibility of a Bootstrap dropdown menu?
Use the toggle() method on the dropdown instance to open it if closed, or close it if open.
Click to reveal answer
beginner
How can you listen for when a Bootstrap dropdown menu is fully shown?
Listen for the shown.bs.dropdown event on the dropdown element to run code after the menu is fully visible.
Click to reveal answer
Which Bootstrap dropdown event fires before the menu is shown?
Ahidden.bs.dropdown
Bshown.bs.dropdown
Chide.bs.dropdown
Dshow.bs.dropdown
What method opens a Bootstrap dropdown menu programmatically?
Aopen()
Bshow()
Cdisplay()
Dtoggle()
Which event indicates a dropdown menu has been fully hidden?
Ahidden.bs.dropdown
Bshown.bs.dropdown
Cshow.bs.dropdown
Dhide.bs.dropdown
How do you toggle a Bootstrap dropdown menu's visibility?
Aflip()
Bswitch()
Ctoggle()
Dchange()
Which event fires after a dropdown menu is fully shown?
Ashown.bs.dropdown
Bshow.bs.dropdown
Chide.bs.dropdown
Dhidden.bs.dropdown
Explain the sequence of Bootstrap dropdown events when a menu is opened and then closed.
Think about what happens before and after showing or hiding the dropdown.
You got /4 concepts.
    Describe how to use JavaScript to open, close, and toggle a Bootstrap dropdown menu.
    Remember the methods available on the dropdown instance.
    You got /4 concepts.

      Practice

      (1/5)
      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
      Recommended

      Ready to prove it?

      Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

      10 questions~5 mineasy hard