JSFiddle - React, Tailwind, and code Playground

HTML

<a class="btn btn-default ini" id="hs1" href="#" role="button">TEST</a>
<div class="container" id="chi">
         <div class="row">
           <div class="col-xs-11 col-sm-12 col-md-10 col-lg-8 col-centered">
                <div class="panel panel-primary">
                     <div class="panel-heading"><h2>Test</h2><h5>Test</h5></div>
                     <div class="panel-body">
                       <p>Test</p>
                       </div>
               </div>
           </div>
         </div>
       </div>

CSS

.ini{
color: white;
border: 2px solid #0000FF;
}

.ini:hover {
  color: blue;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.175);  
}

.active {
  color: blue;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.175);  
}

JavaScript

$("#chi").hide();
  $("#hs1").click(function(){
      $(this).toggleClass('active');
			if($('#chi').is(':hidden')){
      $("#chi").toggle(500);}
      else{$("#chi").hide(1000);}
  });