JSFiddle - React, Tailwind, and code Playground

HTML

<div id="oneofmanyitems">
    <div id="toggle" class="active"><h2>Click me to reveal the generated texts</h2></div>
    <div id="popouter">
        <div>Some generated text</div>
        <div>Some generated text</div>
        <div>Some generated text</div>
        <div>Some generated text</div>
    </div>
    <div id="pop">
        <div>Some t</div>
        <div>Some t</div>
        <div>Some t</div>
        <div>Some t</div>
    </div>
</div

CSS

#oneofmanyitems {
    width:100%;
    background: #f8f8f0;
}

#toggle {
    background-color:#ddd;
    height:50px
}

#popouter {
    position: absolute;
    z-index: -1;
    width: 80%;
    background: #ddd;
}
#pop{
    position: absolute;
    z-index: -1;
    width: 80%;
    background: #aaa;
}

JavaScript

$('#toggle').click(function(){
        if ($(this).hasClass('active')){
            $(this).removeClass('active');
            $("#popouter").slideUp();
            $("#pop").slideDown();
         }else{
            $(this).addClass('active');
            $("#popouter").slideDown(); 
            $("#pop").slideUp();
         }
        return false;
    });