JSFiddle - React, Tailwind, and code Playground

by Sgoettschkes

HTML

<div id="selectList">
    <div>Headline</div>
    <p>Some content</p>
</div>

CSS

#selectList{
  width:300px;
  height:200px;   

  border:1px solid black;    
}

#selectList p{
    display:none;
}

JavaScript

$(document).ready(function() {
    var selectListMouseBind = function(event) {
        if($(event.target).closest('#selectList').length > 0){
             return;
        }
        $(this).find('p').hide();

        selectListActive = false;
    }

    var selectListActive = false;
    $('#selectList').click(function() {
        if (selectListActive) {
            $(this).find('p').hide();

            selectListActive = false;
            $('body').unbind('mousedown', selectListMouseBind);
        } else {
            $(this).find('p').show();

            selectListActive = true;
            $('body').bind('mousedown', selectListMouseBind);
        }
        
        return false;
    });
});