JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<div class="conteiner">
    <div class="click"></div>
    <div class="hidden">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>5</li>
            <li>fgdg</li>
        </ul>
    </div>
</div>

CSS

.conteiner {
    width: 200px;
    height: 20px;
    border: 1px solid #ccc;
    position: relative;
}

.click {
    position: absolute;
    width: 200px;
    height: 20px;
    left: 0; top: 0;
    cursor: pointer;    
}

.hidden {
    display: none;
    position: absolute;
    width: 200px;
     left: 0; top: 20px;
    background: #ccc;
}

JavaScript

var content = $('.conteiner');
var hidden = $('.hidden');

$('.click').click(function(){
    if(content.hasClass('open')) {
        hidden.fadeOut(200, function(){
            content.removeClass('open');
        });
       } else {
           hidden.fadeIn(200, function(){
                content.addClass('open');
            });
       };
});

$(document).click(function(){
    $('.conteiner.open').find('.hidden').fadeOut(200, function(){
            content.removeClass('open');
        });
	});