JSFiddle - React, Tailwind, and code Playground

HTML

<button>Animate</button>

<h1>sdfs sf sdf</h1>

CSS

h1 {
    font: bold 72px/120% sans-serif;
    text-align: center;
    letter-spacing: -1px;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    overflow: hidden;
    background: #fee;
}
h1.collapsed {
    height: 0 !important;
}
.text p {
    padding: 20px;
    margin: 0;
}
button {
    font-size: 18px;
    margin: 1em 0;
}

JavaScript

// document ready implicit

// save the title height in a 
// data-attribute, then hide
var title = $("h1")
title.attr("data-height", title.height())
    .addClass("collapsed");


// ignore
title.html(decrypt(title.html()));

// set the height when an action is performed
$("button").on("click", function () {
    title.toggleClass("collapsed")
        .css("height", title.attr("data-height"));
});