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='closebutton' href='#'><i class="fa fa-minus-circle"></i></a>
    <a class='openbutton' href='#'><i class="fa fa-plus-circle"></i></a>
<div>

CSS

.section {
    width:200px;
    height: 300px;
    border: 1px solid black;
        -webkit-transition: height 1s; 
      -moz-transition: height 1s; 
      -ms-transition: height 1s; 
      -o-transition: height 1s; 
      transition: height 1s; 
}
.section.close {
    height: 25px;
}
.section.open .openbutton{
    display: none;
}
.section.close .openbutton {
    display: block;
}
.section.close .closebutton {
    display: none;
}
.section.open .closebutton {
    display: block;
}

JavaScript

$('.openbutton').click(function() {
        $('.section').addClass('open');
        $('.section').removeClass('close');
    });
$('.closebutton').click(function() {
        $('.section').addClass('close');
        $('.section').removeClass('open');
    });