JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<ul class="col-xs-6 pull-right text-right kaup-select">
<li id="kaup-hidden">
    <span id="close-haup" class="haup-close-icon">
    </span>
    <p>
        <a href="#">Garden</a>
    </p>
    <p>
        <a href="#">News</a>
    </p>
    <p>
        <a href="#">Tools</a>
    </p>
</li>
<li id="kategorie-select">
    <a class="active-crumb haup-ico" href="#">Kategorie</a>
</li>

CSS

#kaup-hidden{
    display:none;
}

#kategoie-select{
    display:block;
}

JavaScript

$('#kategorie-select').on('click', function () {
        $('#kaup-hidden').toggle();
});
$('#close-haup').on('click', function () {
    $('#kaup-hidden').hide();
});

// When hidden layer is shown, this code allows to close layer on every element click, but not on layer itself.
$(document).mouseup(function (e) {
    var container = $("#kaup-hidden");
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});