JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Hello world</h1>
<p id="anima">When I was five, my grandfather kept a stash of 3  Musketeers bars on top of his fridge. Not just a handful, but an actual  display box like the ones in the check-out aisle at the grocery. He  bought them because they were my favorites; they lived on the fridge  because they were contraband. I wasn’t supposed to have sugar. Honey and  blackstrap molasses from a co-op grocery that smelled like  carob-flavored mummy, sure, but not the refined stuff then subject to a  hippie-driven moral panic. My other grandparents also sneaked around my  parents’ sugar blockade, but Papa’s contravention was by the far the  most extravagant: a store box! And all for me.</p>

CSS

body {
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

#anima {
    line-height: 1.6em;
    overflow: hidden;
}

JavaScript

var heading = document.getElementsByClassname('jack')[0],
    anima = document.getElementById('anima'), 
    divHeight = anima.clientHeight,
    speed = 5,
    myInterval = 0, 
    animating = false;

function slide(speed, goal) {
    if(Math.abs(anima.clientHeight - goal) <= speed){
        anima.style.height = goal + 'px';
        animating = false;
        clearInterval(myInterval);
    } else if(anima.clientHeight - goal > 0){
        anima.style.height = (anima.clientHeight - speed) + 'px';
    } else {
        anima.style.height = (anima.clientHeight + speed) + 'px';
    }
}

heading.onclick = function() {
    if(!animating) {
        animating = true;
        var goal = (anima.clientHeight >= divHeight) ? 0 : divHeight;
        myInterval = setInterval(slide, 13, speed, goal);
    }
}