JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<div id="contener">
    <div id="panel">
        msdouifhfhsqd ghufd hsqdl fhqsdf hpqisdu fhqilsdhuf qihsd fiqhsd
    </div>
    <div id="otherdiv">
        dfmq doifjq msdjif mqoisdfjm qsdif mqsidfh mqsodfh qmsodf  
    </div>
    <div class="login">RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR</div>
</div>
<div>
<button id="test">test</button>
</div>

CSS

div{
    border:1px solid blue;
}

JavaScript

$('.login').toggle(
function()
{
  $('#panel').animate({
  height: "150", 
  padding:"20px 0",
  backgroundColor:'#000000',
  opacity:.8
 }, 500);
 $('#otherdiv').animate({
     //otherdiv properties here
 }, 500);
},
function()
{
  $('#panel').animate({
  height: "0", 
  padding:"0px 0",
  opacity:.2
  }, 500);     
 $('#otherdiv').animate({
     //otherdiv properties here
 }, 500);

});