JSFiddle - React, Tailwind, and code Playground

by Dmitry Sviridenko

HTML

<div class="select">
	<div data-current="" class="select-current">1</div>
	<div class="select-list">
		<div class="select-item current">1</div>
		<div class="select-item">2</div>
		<div class="select-item" data-role="disabled"></div>
		<div class="select-item">3</div>
		<div class="select-item">4</div>
	</div>
</div>

CSS

.select{
	width: 100px;
	height: 40px;
	text-align: center;
	position: relative;
}
.select-current{
	padding:10px;
	width: 50px;
	height: 20px;
	margin-left: 10px;
	background-color: #fff;
	cursor: pointer;
}
.select-list{
	position: absolute;
	width: 120px;
	height: auto;
	display: block;
	max-height: 0;
	overflow: hidden;
	transition: .3s;
}
.select-item{
	background-color: red;
	border-bottom: 1px solid #fff;
	height: 20px;
	cursor: pointer;
}
.select-item.current{
	color: #fff;
}
.select-list.active{
}

JavaScript

$('.select-current').click(function(){
	let elem 	= $('.select-item'),
			count = elem.length,
			h 		= elem.height(),
			h2 		= count * h,
			list 	= $('.select-list');
	
	list.toggleClass('active');
	if(list.hasClass('active')){
		list.css({'max-height': h2 + 'px'});
	} else{
		list.css({'max-height': '0px'});
	}
});
$('.select-item').click(function(){
	if($(this).attr('data-role','disabled')){
		console.log($(this));
		console.log('error');
	} else{
		let current = $('.select-item.current').text();
		$('.select-item').removeClass('current');
		$(this).addClass('current');
		$('.select-current').text(current);
		$('.select-list').removeClass('active');
	}
});