JSFiddle - React, Tailwind, and code Playground

HTML

<div id="1">DIV 1</div>
<div id="text1">DIV 1 text</div>
<div id="2">DIV 2</div>
<div id="text2">DIV 2 text</div>

CSS

#text1, #text2 {
    display:none;
}

JavaScript

$(document).ready(function () {
    $("#1").click(function () {
        $("#text1").slideDown(300);
    });
});

$(document).ready(function () {
    $("#2").click(function () {
        $("#text2").slideDown(300);
    });
});

$("#2").click(function () {
    $('#text1').slideUp(300);
});

$("#1").click(function () {
    $('#text2').slideUp(300);
});

$(document).mouseup(function (e)
{
    var container = $("#text1, #text2");

    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.slideUp(300);
    }
});