JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<div id="menu-act" class="menu-button">
    <ul class="no-js">
        <li>	<a id="btnclick" class="actions">Actions</a>

            <ul class="action-options">
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
            </ul>
        </li>
    </ul>
</div>
<div id="menu-act2" class="menu-button">
    <ul class="no-js">
        <li>	<a id="btnclick2" class="actions">Actions</a>

            <ul class="action-options">
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
            </ul>
        </li>
    </ul>
</div>

JavaScript

$('.menu-button .action-options').hide();
$('.menu-button .actions').click(function (e) {
    if ($(this).parents('ul').find('.action-options').is(':visible')) {

        $(this).parents('ul').find('.action-options').slideUp(10);
        $('.actions').removeClass('active');
    } else {
        $('.menu-button .action-options').slideUp(10);
        $(this).parents('ul').find('.action-options').slideDown(10);
        $('.actions').addClass('active');
    }
    e.stopPropagation();
});
$(document).click(function (e) {

    $(".menu-button .action-options").hide();
    return true;
});