JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="dropdownFiltersBloc is-inactive">
    <span class="dropdownFiltersBtn">Sales</span>

    <ul class="dropdownFiltersList">
        <li>Today</li>
        <li>7 days</li>
        <li>30 days</li>
        <li>All days</li>
    </ul>
</div>
<div class="dropdownFiltersBloc is-inactive">
    <span class="dropdownFiltersBtn">Sales</span>

    <ul class="dropdownFiltersList">
        <li>Today</li>
        <li>7 days</li>
        <li>30 days</li>
        <li>All days</li>
    </ul>
</div>
<div class="dropdownFiltersBloc is-inactive">
    <span class="dropdownFiltersBtn">Sales</span>

    <ul class="dropdownFiltersList">
        <li>Today</li>
        <li>7 days</li>
        <li>30 days</li>
        <li>All days</li>
    </ul>
</div>

<div class="dropdownsOverlay is-inactive"></div>

CSS

.dropdownFiltersBloc {
    position: relative;
}

.dropdownFiltersBloc.is-active  {
    z-index: 1;
}
.dropdownFiltersBloc.is-active .dropdownFiltersList {
    display: block;
}
.dropdownFiltersBloc.is-inactive .dropdownFiltersList {
    display: none;
}

.dropdownsOverlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.dropdownsOverlay.is-active {
    display: block;
}
.dropdownsOverlay.is-inactive {
    display: none;
}

JavaScript

$.fn.extend({
    activate: function () {
        return $(this).removeClass('is-inactive').addClass('is-active');
    },

    deactivate: function () {
        return $(this).removeClass('is-active').addClass('is-inactive');
    }
});


$.extend({
    activate: function () {
        for (var i = arguments.length; 0 < i--;) {
            arguments[i].activate();
        }
    },

    deactivate: function () {
        for (var i = arguments.length; 0 < i--;) {
            arguments[i].deactivate();
        }
    }
});



$(function () {
    var $ = jQuery,
        $overlay,
        opened$bloc,
        assign = function ($bloc) {
            var $btn = $bloc.find('.dropdownFiltersBtn'),
                $list = $bloc.find('.dropdownFiltersList');

            $btn.on('click', assign$btnClick($bloc));
            $list.on('click', 'li', assign$listClick($btn));
        },

        assign$btnClick = function ( $bloc ) {
            return function () {
                if ( $bloc.hasClass('is-inactive') ) {
                    open$bloc($bloc);
                } else {
                    closeOpened$bloc();
                }
            };
        },

        assign$listClick = function ( $btn ) {
            return function (e) {
                $btn.text($(e.target).text());
                closeOpened$bloc();
            };
        },

        closeOpened$bloc = function () {
            $.deactivate(opened$bloc, $overlay);
            opened$bloc = undefined;
        },

        open$bloc = function ( $bloc ) {
            opened$bloc = $bloc.activate();
            $overlay.activate();
        },

        init = function () {
            var $blocs = $('.dropdownFiltersBloc'),
                $lists = $('.dropdownFiltersList'),
                i = $blocs.length;

            $overlay = $('.dropdownsOverlay');

            for (; i-- > 0;) {
                assign($blocs.eq(i));
            }

            $overlay.off()
                .on('click',...