JSFiddle - React, Tailwind, and code Playground

by locally

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class='section open'> <a class='button' href='#'><i class="fa fa-toggle-off"></i></a>

    <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel vestibulum ex. Aliquam id elementum sapien. Aliquam erat volutpat. Suspendisse rutrum magna dignissim tincidunt pharetra. Morbi est augue, euismod eu nisi id, consequat vehicula eros. Sed id congue urna. Etiam eu dapibus purus, quis cursus orci. Proin elementum leo neque, ac hendrerit massa gravida ut. Curabitur leo eros, sodales non aliquam at, euismod id neque. Donec et fermentum urna. Proin eget justo vel lectus elementum tristique. Nunc at egestas tellus, eu varius odio. Nulla consequat semper velit nec suscipit. Nunc et est vehicula augue posuere porttitor.
    <div>

CSS

.section {
    width:200px;
    height: 300px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    overflow: hidden;
    background-color: #231f20;
    color: white;
}
.section.close {
    height: 20px;
    background-color: transparent;
}
.fa-toggle-off {
    color: #fff;
}

JavaScript

$('.button').click(function () {
    $('.section').toggleClass('open close');
    $(' > i', this).toggleClass('fa-toggle-off fa-toggle-on');
});