JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
		<li>
			<span class="nav-header">Игрушки</span>
			<ul>
				<li>
					<a href="#">Констукторы</a>
				</li>
				<li>
					<a href="#">Песочный инвентарь</a>
				</li>
				<li>
					<a href="#">Каталки</a>
				</li>
			</ul>
		</li>
	</ul>

CSS

body {
	margin: 30px;
	padding: 0;
}
.nav, .nav li ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav li {
	margin-bottom: 4px;
}
.nav li a {
	padding-left: 15px;
	color: #0c7ce9;
	font-size: 14px;
}
.nav li a:hover {
	text-decoration:none;
}
.nav li span.nav-header, .nav li span.nav-header  {
	padding-left: 24px;
	color: #0c7ce9;
	font: 16px Arial;
	font-weight: bold;
	cursor: pointer;
}
.nav li span{
	background: url('http://savepic.ru/7327919.png') no-repeat left center;
}
.nav li.active span {
	background: url('http://savepic.ru/7310511.png') no-repeat left center;
}
.nav li ul li {
	margin-left: 15px;
	background: url('http://savepic.ru/7307439.png') no-repeat left 
}
.nav li ul li a:hover {
	color: #ee8c00;
}
.nav li ul li.active a{
	color: #ee8c00;
	text-decoration: none;
}

JavaScript

$(function () {
	var el = $('.nav li span.nav-header');
	$('.nav li:has("ul")').append('<span></span>');		
	el.click(function() {
		var checkElement = $(this).next();	
		
		checkElement.stop().animate({'height':'toggle'}, 500).parent().toggleClass('active');
		if(checkElement.is('ul')) {
			return false;
		}		
	});
});