JSFiddle - React, Tailwind, and code Playground

HTML

<a class="soundDiv-link" href="#" >sound-link</a>
<a class="videoDiv-link" href="#" >video-link</a>
<a class="imagesDiv-link" href="#" >images-link</a>

<div class="hidden" id="soundDiv">
<a class="soundDiv-link" href="#" >sound-link</a>
</div>
<div class="hidden" id="videoDiv">
<a class="videoDiv-link" href="#" >video-link</a>
</div>
<div class="hidden" id="imagesDiv">
<a class="imagesDiv-link" href="#" >images-link</a>
</div>

CSS

.hidden {
	background-color: yellow;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	overflow: hidden;
}

JavaScript

$(document).ready(function() {
	$('.hidden').hide()
});
 $('.soundDiv-link').click(function() {
	 $('#soundDiv').slideToggle("slow")
 });
 $('.videoDiv-link').click(function() {
	 $('#videoDiv').next().animate({width: 'toggle'}, "slow")
 });
 $('.imagesDiv-link').click(function() {
	$('#imagesDiv').animate({width: 'toggle'}, "slow")
  });