JSFiddle - React, Tailwind, and code Playground

HTML

<div id="undernav" style="top:50%;">
	<button type="button" id="undernavbtn" onclick="funcAbout()"><span>About</span></button>
</div>
		
<div id="abouttextbackground" style="opacity:0;bottom:0;">
	<div id="abouttext">
		<h1><span style="font-weight:normal;">Introduction text</span><span style="display:block;font-weight:bold;">Second line cool descriptive text</span></h1>
		<p>Sweet, paragraph text, that's fun!</p>
		<img src="http://placehold.it/250x250" height="250px" alt="image alt text">
	</div>
</div>

CSS

body {overflow-y:hidden;}
html {
	font-family:Calibri, Garamond, Caslon, Arial, serif;
  background-color:grey;
}

body {
	margin:0;
	padding:0;
}

#undernavbtn {
	border:5px solid white;
	background-color:transparent;
	color:white;
	padding-right:30px;
	padding-left:30px;
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
	text-decoration:none;
	font-size:2em;
	/*slide transition*/
	box-shadow: inset 0 0 0 0 transparent;
	-webkit-transition: all ease 0.8s;
	-moz-transition: all ease 0.8s;
	transition: all ease 0.8s;
	cursor:pointer;
}

#undernavbtn:hover {
	box-shadow: inset 0 -100px 0 0 #262626;
}

#undernav {
	width:100%;
	text-align:center;
	position:absolute;
	-webkit-transition: all ease 0.8s;
	-moz-transition: all ease 0.8s;
	transition: all ease 0.8s;
}

#abouttext {
	width:70%;
	margin:auto;
}

#abouttextbackground {
	border-top:5px solid black;
	width:100%;
	background-color:rgba(230, 242, 255, 0.7);
	position:absolute;
	top:35%;
	z-index:-1;
	-webkit-transition: all ease 0.8s;
	-moz-transition: all ease 0.8s;
	transition: all ease 0.8s;
}

JavaScript

var scrollvis = 'hidden';
function funcAbout() {
		scrollvis = (scrollvis=='hidden') ? 'auto' : 'hidden';
		$('body').css({'overflow-y':scrollvis});
				
        var btn = document.getElementById("undernavbtn");
				
        btn.classList.toggle("active")
				
				var under_nav = document.getElementById("undernav");
				
				if (under_nav.style.top == "50%") {
					under_nav.style.top = "20%"
				} else {
					under_nav.style.top = "50%"
				}
				
				var about_text = document.getElementById("abouttextbackground");
				
				if (about_text.style.opacity == "0") {
					about_text.style.opacity = "1"
				} else {
					about_text.style.opacity = "0"
				}
        
        var background_bottom = document.getElementById("abouttextbackground");
				
				if (background_bottom.style.bottom == "0px") {
					background_bottom.style.bottom = "auto"
				} else {
					background_bottom.style.bottom = "0"
				}
			}