JSFiddle - React, Tailwind, and code Playground

by yijiang

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.getElementsByTagName('h1')[0],
    anima = document.getElementById('anima'), 
    divHeight = anima.clientHeight,
    speed = 50,
    myInterval = 0;

function slide(speed, goal) {
    alert(goal, anima.clientHeight);
    
    if(Math.abs(anima.clientHeight - goal) <= speed){
        anima.style.height = goal + 'px';
        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() {
    var goal;
    
    if(anima.clientHeight >= divHeight){
        goal = 0;
    } else if(anima.clientHeight === 0){
        goal = divHeight;
    }
    
    var myInterval = setInterval(slide, 13, 10, goal);
}