JSFiddle - React, Tailwind, and code Playground

by kasperfish

HTML

<div class="config">
    <div class="select-list hidden">
        <ul>
            <li>Something 1</li>
            <li>Something 2</li>
            <li>Something 3</li>
        </ul>
    </div>
</div>

CSS

.hidden{display:none;}
.config{
    background:lightblue;
    min-height:50px;
    min-width:50px;
}

JavaScript

$('body').on('click', '.config', function(e) {
    if (e.target == this) {
        $(this).find('.select-list').toggleClass('hidden');
    } else {
        e.stopPropagation();
    }
});

$('body').on('click', '.select-list li', function() {
    $(this).toggleClass('selected');
});