JSFiddle - React, Tailwind, and code Playground

by herrkarlson

HTML

<div id="oneofmanyitems">
    <div id="toggle"><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

CSS

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

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

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

JavaScript

var h = parseInt($('#popouter').css('height'))
    //$('#popouter').css('margin-top',-h)
    $('#toggle').click(function(){
        if(parseInt($("#popouter").css("margin-top")) == 0) {
          $("#popouter").animate({marginTop: -h}, 1000);
        } else {
          $("#popouter").animate({marginTop: 0}, 1000);
        }
        return false;
    });