Скачать или смотреть How to Use the Same Function for Different Buttons to Display Their Own Dropdown Lists

Learn how to create interactive dropdown menus in your HTML that respond to each button click using a unified JavaScript function.
---
This video is based on the question https://stackoverflow.com/q/68331296/ asked by the user 'eren' ( https://stackoverflow.com/u/14819968/ ) and on the answer https://stackoverflow.com/a/68331329/ provided by the user 'Kinglish' ( https://stackoverflow.com/u/1772933/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to use the same function for different buttons to display their own dropdown lists

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Creating Interactive Dropdowns with a Single Function

Dropdown menus are a common feature in web applications, and they can enhance user interaction significantly. However, what if you have multiple buttons on your page that need to display their own respective dropdown lists? It can be a bit tricky to manage if each button has to trigger its own dropdown. In this guide, we’ll explore a simple way to handle this using a single JavaScript function.

The Problem

Imagine you have several dropdown buttons, each intended to reveal a unique dropdown list. The challenge arises when you find that using a simple query selector for your buttons only allows the first button's dropdown to display. This is a common issue when working with JavaScript and HTML, especially for developers looking to make their code reusable and efficient.

For example, consider the following HTML structure:

[[See Video to Reveal this Text or Code Snippet]]

If you simply target the dropdown buttons like this:

[[See Video to Reveal this Text or Code Snippet]]

You’ll only interact with the first button found in the DOM.

The Solution: Using Closest and Query Selectors

To effectively manage multiple dropdowns with a single function, you can utilize the closest method along with an event listener. This allows you to specifically target the dropdown associated with the button that is clicked. Here’s a step-by-step guide on how to implement this solution:

Step 1: Organize Your HTML

First, you’ll want to make sure that your buttons and dropdown lists are structured correctly. Group each button with its corresponding dropdown within a container. Here’s how you can modify your HTML:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Implement JavaScript

Now, let’s add the JavaScript to handle the click events on each button. You can use the following code snippet:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Style Your Dropdown

Ensure to add some CSS to manage the visibility of your dropdown lists. For example:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

With this approach, you have created a scalable solution that allows for multiple buttons to each show their own dropdown lists when clicked. By using a single function and associating dropdowns with their respective buttons using the closest method, your code becomes much cleaner and easier to manage in the long run.

Now, whenever a user clicks on a button, it will only show the corresponding dropdown list — making it a seamless experience! Happy coding!