JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<a href="#" id="menu-item-1"><span style="margin-right: 5px;">link</span></a>

<div id="menu-content-1" class="menu-content">
					<div style="width: 50%; height: 100%; float: left;">
						<ul>
							<li><a href="">Link</li>
							<li><a href="">Link</li>
							<li><a href="">Link</li>
							<li><a href="">Link</li>
							<li><a href="">Link</li>
						</ul>
					</div>
					<div style="width: 50%; height: 100%; float: left;">
						menu right 
					</div>
				</div>

CSS

.menu-content {
	width: 300px; 
	border: 1px solid red; 
	z-index: 999; 
	position: absolute; 
	background-color: white;
    transition:position 1s linear;
    opacity:0;
}
.active{
    border:1px solid green;
    transition:position 1s linear;
    opacity:1;
}

JavaScript

$(document).ready(function() 
{
    $("#menu-item-1").click(function() 
	{
		var elem = $("#menu-content-1");
		var p = $(this).position();

		if (elem.css("opacity") == "0")
		{
			elem.addClass("active").slideDown();
		}
		else
		{
			elem.removeClass("active").slideUp();
		}
	});
});