JSFiddle - React, Tailwind, and code Playground

by ham dlink

HTML

<ul>
	<li class="click-me">click me
		<ul class="hidden">
			<li>Link 1</li>
			<li>Link 2</li>
			<li>Link 3</li>
			<li>Link 4</li>
			<li>Link 5</li>
			<li>Link 6</li>
		</ul>
	</li>
</ul>

CSS

<style>
ul li{
	list-style: none;
}
	.click-me{
		display: inline;
	}
	.hidden{
		display:none;
		background: #333;
		width:150px;
		color:red;
		padding:30px;
	}
</style>

JavaScript

$(document).ready(function(){
		$('.click-me').click(function(){
			$('.hidden').slideDown();
		});

		$('body').click(function(e){
			if(e.target.className!=='click-me'){
				$('.hidden').slideUp();
			}
		});
	});