JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"> 
		
		<div id="panel-frame"> 
			<div class="panel"> 
				<!-- Content to load in slide-in menu	-->
				
				<div class="data" >
				
				</div>
			</div> 
		</div> 
 		<div class="top"> 
			<div class="menu-item block" dataid="1">Item1</div> 			
			<div class="menu-item block" dataid="2">Item2</div> 
			<div class="menu-item block" dataid="3">Item3</div> 
		</div> 
		<div style="display:none">
				<div id="1">Test</div> 	
				<div id="2">Asdf</div> 	
				<div id="3">asdasdad</div> 	
		</div>
	</div>

CSS

<style> 
	body{
		font-family:sans-serif;
		padding:0;
		margin:0;
	}
	.right
	{
		
		float:right;
		width:100%;
		padding-left:250px;
	}
	.top
	{
		float:left;
		
		width:100%;
		height:50px;
		position:fixed;
		top:0;
		
		background-color:red;
		box-shadow:0px 0px 10px rgba(0, 0, 0, 0.7);
	}
	.menu-item
	{
		position:relative;
		float:left;
		
		padding: 10px 15px 0 15px;
		height:40px;
		
	}
	.menu-item:hover
	{
		background-color:#ffc72e;
		cursor:pointer;
	}
	.menu-item-selected
	{
		background-color:black;
		color:white;
	}
		
	#panel-frame
	{
		width:100%;
		position:fixed;
		height:50px;
	}
	.panel
	{
		background-color:#f2f2f2;
		position:relative;
		width:100%;
		height:50px;
		box-shadow:0px 0px 10px rgba(0, 0, 0, 0.7);
		top:0px;	 
	}
	
</style>

JavaScript

function loadContent()
	{
		
	}

   $('.block').click
   (
		function()
		{
            
			var id= $(this).attr('dataid');
			var did="#" + id;
			var data_id= $(did).html();
			var panel= $('.panel');
			var panel_width=$('.panel').css('top');		
			var pixels = parseInt(panel_width,0);
			
			
			//close the element if it was already selected
			if($(this).hasClass("menu-item-selected"))
			{
				//remove css class
				$(this).removeClass("menu-item-selected");
				
				//close the item
				panel.animate({top: 0});
			}
			//open it up if not selected or changing element
			else
			{
				//remove all selected tags
				$('.block').removeClass("menu-item-selected");
				
				//add it to the current one
				$(this).addClass("menu-item-selected");
				
				//if opened, close open and open it up again
				if(pixels > 0)
				{
					panel.animate({top: 0},function()
					{
						//empty data
						$('.data').html('');
					})
					.animate({top: panel.outerHeight() },
						function()
						{
							//AJAX CALL OR COPY ELEMENT TO .data using loadContent(toElement,fromWhere); 
							// toElement -> CSS selector, fromWhere, CSSSelector
							$('.data').html(data_id);		
						}
					);
				}
				//open/close	panel
				else
				{
					panel.animate({top: pixels == 0 ? +panel.outerHeight() : 0},
					function()
					{
							//AJAX CALL OR COPY ELEMENT TO .data using loadContent(toElement,fromWhere); 
							// toElement -> CSS selector, fromWhere, CSSSelector	
							$('.data').html(data_id);	
					}
					);
				}
				
			}
			
			return false;												
		}
	);
  
	$('.close').click
	(
		function() 
		{
			var panel= $('.panel');
			panel.animate({top: parseInt(panel.css('top'),0) == 0 ? +panel.outerHeight() : 0});
			return false;
		}
	);