JSFiddle - React, Tailwind, and code Playground

HTML

Here is some text.
<!-- THE GRAY DIV -->
<div id="s"
     class="expandable"
     style="background:#e6e6e6; height: 20px;">
    <!-- upon clicking this <a>, javascript executes
         toggleHeight, using 150 as the maxHeight. -->
    <a href="#!" onclick="toggleHeight(this, 150); return false">
            Show/hide<a>
    <p>Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

CSS

.expandable {
    padding-top: 10px;
    /* overflow set to hidden to hide the expanded text */
    overflow: hidden;
    /* all style changes will ease-in-out for 1s */
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s;
}

JavaScript

function toggleHeight(e, maxHeight) {
    e = document.getElementById("s"); // e = the gray div
    
    if(e.style.height != '20px') {
        e.style.height = '20px'; // height of one line: 20px
    } else {
        e.style.height = maxHeight + 'px';
    }
}