JSFiddle - React, Tailwind, and code Playground

by supercobra

HTML

<style>
    .msg {
      
      border: 1px solid silver;
      margin: 10px;
      padding: 10px;
    }
.hidden-msg {display:none;}
    .animate {
      -webkit-transition: all ease-out 0.6s;
      -moz-transition: all ease-out 0.6s;
      -o-transition: all ease-out 0.6s;
      transition: all ease-out 0.6s;
    }

* { margin:0; padding:0; }

 
.expandable {
  background: #fff;
  overflow: hidden;
  color: #000;   
  line-height: 50px;

  transition: all .5s ease-in-out;
  height: 0;
 }
 
 .expandable:target {
  height: 50px;
}
</style>

<input type="button" value="show" onclick="showDiv();" />
<input type="button" value="hide" onclick="hideDiv();" />

 <div class="expandable" id="nav2">
    <p>Cum enim magna parturient Cum enim magna parturient Cum enim magna parturient Cum enim magna parturient Cum enim magna parturient Cum enim magna parturient Cum enim magna parturient </p>
  </div>
<div id='msg' class='msg'>
a message
</div>


<div id='msg' class='msg'>
a message
</div>

JavaScript

function showDiv() {
   document.getElementById('nav2').style.height = "150px";
   document.getElementById('nav2').classList.add("msg");
}

function hideDiv() {
      document.getElementById('nav2').classList.remove("msg");
document.getElementById('nav2').style.height = "0px";
}