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

$("#2").click(function () {
    $("#text2").slideDown(300);
});
$("#1").click(function () {
    $("#text1").slideDown(300);
});

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

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

$(document).click(function (event) {
    if (event.target.id != '1' && event.target.id != '2') {
        $('#text2').slideUp(300);
        $('#text1').slideUp(300);
    }
});