JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<ul id="menu">
			<li class="menu-top-item">
				<a href="#">Item 1</a>
				<ul id="submenu">
					<li class="menu-sub-item">
						<a class="menu-sub-item-link" href="#" data-menu="show1">Sub menu 1</a>
					</li>
					<li class="menu-sub-item">
						<a class="menu-sub-item-link" href="#" data-menu="show2">Sub menu 2</a>
					</li>
				</ul>
			</li>
		</ul>
		<div id="show1" class="content">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </div>
		<div id="show2" class="content">Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri </div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script>
			$(document).ready(function () {
				$('.menu-top-item').click(function () {
					$('#submenu').fadeToggle();
					$('.content').fadeOut();
				});
				$('.menu-sub-item-link').click(function () {
					var menu = $(this).data("menu");
					$('#' + menu).fadeIn();
				});
			});
		</script>
	</body>

CSS

#submenu, .content {display: none;}