Vanilla JavaScript Multiple Dropdown Toggles Example

Multiple Dropdown Toggles Example

Introduction

This example demonstrates how to create and manage multiple dropdown toggles using HTML, CSS, and JavaScript. Each dropdown toggle can be individually opened and closed, and clicking outside of a dropdown closes it.

Features

• Create and style multiple dropdown toggles.
• Toggle each dropdown independently.
• Close dropdowns when clicking outside of them.

Usage

1. HTML Structure: Create the HTML structure for each dropdown toggle and dropdown content in your document. Customize the content and styling as needed.

   <div class="dropdown">
       <button class="dropdown-button">Dropdown Toggle 1</button>
       <div class="dropdown-content">
           <!-- Dropdown Content 1 -->
           <a class="dropdown-item" href="#">Item 1</a>
           <a class="dropdown-item" href="#">Item 2</a>
           <a class="dropdown-item" href="#">Item 3</a>
       </div>
   </div>

   <div class="dropdown">
       <button class="dropdown-button">Dropdown Toggle 2</button>
       <div class="dropdown-content">
           <!-- Dropdown Content 2 -->
           <a class="dropdown-item" href="#">Item A</a>
           <a class="dropdown-item" href="#">Item B</a>
           <a class="dropdown-item" href="#">Item C</a>
       </div>
   </div>

1. JavaScript Code: Include the JavaScript code provided below just before the closing </body> tag in your HTML file.

   <script>
       document.addEventListener('DOMContentLoaded', function() {
           const dropdownButtons = document.querySelectorAll('.dropdown-button');
           const dropdownContents = document.querySelectorAll('.dropdown-content');

           // Add event listeners to each dropdown button
           dropdownButtons.forEach((button, index) => {
               button.addEventListener('click', function() {
                   // Toggle the corresponding dropdown when the button is clicked
                   dropdownContents[index].style.display = dropdownContents[index].style.display === 'block' ? 'none' : 'block';
               });
           });

           // Close dropdowns when clicking outside
           document.addEventListener('click', function(event) {
               dropdownButtons.forEach((button, index) => {
                   if (!button.contains(event.target) && !dropdownContents[index].contains(event.target)) {
                       dropdownContents[index].style.display = 'none';
                   }
               });
           });
       });
   </script>

1. Customization: Customize the dropdown content, styling, and behavior for each dropdown as needed.

Code Explanation

• HTML Structure: Each dropdown consists of a button (dropdown-button) and a content container (dropdown-content). Customize the button text and content as per your requirements.

• JavaScript Code: We use JavaScript to add event listeners for each dropdown button and manage their corresponding content containers. The code toggles the visibility of each dropdown when its button is clicked and closes all dropdowns when clicking outside of them.