JSFiddle - React, Tailwind, and code Playground

HTML

<section>
			<div class="fundotog">
			
				  <div class="togglefundo">
				<div class="btn-Help" id="btnHelp">
			</div>
			    </div>
					<div class="help-title" id="helpTitle">
			<h2 id="heading">Need Help</h2>
			</div>
			<div class="help-body" id="helpBody">
			   <p id="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</p>
			</div>
			</div>
		</section>

CSS

.fundotog  {
    overflow: hidden;
    min-height: 500px;
	background-image: url(../img/6.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment:scroll;
    background-size: cover;

}
.togglefundo{
	width: 300px;
	height: 270px;
	background: #eee;
	margin-left: 100px;
	margin-top: 60px;
	position: absolute;

}

.btn-Help {
	min-height: 59px;
	width: 300px;
	background-color: aqua;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  border: none;
	font-size: 30px;
  color: white;
  display: inline-block;
  cursor: pointer;
	top: 0; left:0;

	  z-index: 1;
}

.help-title{
	min-height: 50px;
	width: 0;
	position: absolute;
	top:0; left: 135px;


}
.help-title .h2{
	margin: 0;
	padding: 0;
	text-align: center;
	color: #ED0003;
	display: none;
}
.help-body{
	width: 300px;
	height: 0px;
	margin-left: 100px;
	margin-top: 120px;
	background-color: #278C98;
	position: absolute;
	text-align: justify;
	border-radius: 0 0 25px 25px;

}
.help-body p{
	margin: 0;
	padding: 0;
	color: #000000;
	padding: 12px 35px;
}
@keyframes fadein-right{
  0%{ opacity:0; margin-left:45px;}
  100%{ opacity:1; margin-left=0;}
}
@keyframes fadein-bottom{
  0%{opacity:0; margin-top:45;}
  100%{opacity:1;margin-top:0;}
}
@keyframes fadeout-right{
  0%{opacity:1; margin-left:0;}
  100%{opacity:0; margin-left:45;}
 @keyframes fadeout-bottom{
   0%{opacity:1; margin-top:0;}
   100%{opacity:0; margin-top:45px;}
 }
}

JavaScript

var btnHelp = document.getElementById('btnHelp');
var helpTitle = document.getElementById('helpTitle');
var helpBody = document.getElementById('helpBody');
var heading = document.getElementById('heading');
var description = document.getElementById('description');

var displayToggle = 1;

btnHelp.onclick = function (){
displayToggle++;
 if (displayToggle % 2 == 0){
	 showHelp();
}else{
hideHelp();
}
}

function showHelp (){
	var titleWidth = 0;
	var bodyHeight = 0;
	var id = setInterval(frame,1);
	function frame(){
		if(titleWidth == 270){
			clearInterval(id);	
			heading.style.display = 'block';
			heading.style.animation = 'fadein-right 0.3s';
			var id2 = setInterval(frame2,1);
			function frame2(){
				if(bodyHeight == 270){					
					clearInterval(id2);
          description.style.display ='block';
          description.style.animation='fadein-bottom 0.3s';
				} else {
				  bodyHeight == 5;
				  helpBody.style.height = bodyHeight + 'px';
			}
		}
	} else {
	  titleWidth == 5;
	  helpTitle.style.width = titleWidth + 'px';	
	}	
  }	
}
function hideHelp(){
	description.style.animation = 'fadeout-bottom 0.6s';
	heading.style.animation = 'fadeout-right 0.6s';
	
	var bodyHeight =270;
	var id2 = setInterval(frame2,1);
	function frame2(){
		if(bodyHeight == 0){
			clearInterval(id2);
			var id1 = setInterval(frame1,1);
			function frame1(){
				if(titleWidth == 0 ){
					clearInterval(id1);
				}else{
					heading.style.display ='none';
					titleWidth -=5;
					helpTitle.style.width = titleWidth +'px';
				}
			}
		}else{
			description.style.display='none';
			bodyHeight -=5;
			helpBody.style.height = bodyHeight + 'px';
		}
	}
}