JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<script src="https://cdn.tailwindcss.com"></script>


<button id="notification-toggle-button" data-dropdown-id="notification-menu" class="bg-eb-dark border border-gray-800 pl-2 pr-2 pt-1 pb-1 rounded">
  Drop
</button>

<div class="hidden" id="notification-menu">

  <p>Boo</p>

</div>

JavaScript

const dropdown_buttons = document.querySelectorAll('.dropdown-button');

    dropdown_buttons.forEach(dropdown_button => {
        // dropdown-button

        // console.log('dropdown_button: ' + dropdown_button.getAttribute('data-dropdown-id'));

        // If someone clicks a button
        dropdown_button.addEventListener('click', () => {
            // get the dropdown menu id name

            const dropdownId = dropdown_button.getAttribute('data-dropdown-id')
            // user-menu

            const menu = document.getElementById(dropdownId);

            console.log('dropdownId: ' + dropdownId);

            if (menu) {
                menu.classList.toggle('hidden');
                menu.classList.toggle('block');
            }
        })
    });