JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<body>
	<button>Slide!</button>
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
		<li>Item 5</li>
	</ul>
    <p>some text</p>
</body>

JavaScript

var state = 0;
var duration = 2000;
//0 - slidedDown
//1 - slidingUp
//2 - slidedUp
//3 - slidingDown
$(document).ready(function() {
	$('button').on('click', function(event) {
		var list = $('ul');
		switch(state) {
			case 0: //slidedDown
				list.slideUp(duration, function (){state=2;});
				state = 1;
				break;
			case 1: //slidingUp
				list.stop();
				list.slideDown(duration, function (){state=0;});
				state = 3;
				break;
			case 2: //slidedUp
				list.slideDown(duration, function (){state=0;});
				state = 3;
				break;
			case 3: // slidingDown
				list.stop();
				list.slideUp(duration, function (){state=2;});
				state = 1;
				break;
		}
	});
});