JSFiddle - React, Tailwind, and code Playground

by tchalvakspam

HTML

<div id='container'>
    <h3 id='show-hide-trigger'>summary - hover me</h3>
    <p id='show-hide-text'>Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph</p>
</div>

CSS

#container{
    position:relative;
    height:10em;
}

#show-hide-trigger{
    position:absolute;
    top:0;
    height:10em;
    padding-bottom:9em;
    background:white;
}

#show-hide-trigger:hover{
        z-index: -2;
}

#show-hide-text{
        position:absolute;
        top:0;
        height:10em;
        padding-top:1em;
        z-index:-1;
}
#show-hide-text{
        z-index:2;
}