@lintonrobinson/dropdown-button-toggle

A lightweight utility to toggle dropdowns using a button with built-in open/close logic. Uses data-toggle attributes to link buttons with their corresponding dropdown elements.

Installation

npm install @lintonrobinson/dropdown-button-toggle

Usage

import toggleDropdown from "@lintonrobinson/dropdown-button-toggle";

// This will find all elements with a `data-toggle` attribute
// and attach toggle behavior to the element with the matching `id`
toggleDropdown("[data-toggle]");

Example HTML

<!-- Button targeting #dropdown1 -->
<button data-toggle="dropdown1">Toggle Dropdown 1</button>
<div id="dropdown1" class="dropdown-content">Dropdown 1 content</div>

<!-- Button targeting #dropdown2 -->
<button data-toggle="dropdown2">Toggle Dropdown 2</button>
<div id="dropdown2" class="dropdown-content">Dropdown 2 content</div>

What It Does

• Adds a click event to every button with a data-toggle attribute
• Uses the value of data-toggle to find and toggle the matching id
• Adds or removes the active class on the dropdown element

Styling Suggestion

.dropdown-content {
  display: none;
}

.dropdown-content.active {
  display: block;
}

License

MIT