JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="bar">
<li>Комедии</li>
<li>Боевик</li>
<li>Биография</li>
<div class="bar-spoiler">
<label class="label-spoiler" for="">Показать все жанры</label>
<ul>
<li>Триллер</li>
<li>Вестер</li>
<li>Фантастика</li>
</ul>
</div>
</ul>
<ul class="bar">
<li>2016</li>
<li>2015</li>
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
<li>2010</li>
<li>2009</li>
<li>2008</li>
<li>2007</li>
<div class="bar-spoiler">
<label class="label-spoiler" for="">Показать все года</label>
<ul>
<li>2006</li>
<li>2005</li>
<li>2004</li>
<li>2003</li>
<li>2002</li>
<li>2001</li>
<li>2000</li>
<li>1999</li>
<li>1998</li>
<li>1997</li>
<li>1996</li>
</ul>
</div>
</ul>
CSS
ul {
list-style: none;
}
.bar {
margin: 0;
width: 340px;
border: 4px solid #bcbcbc;
list-style: none;
}
.bar li {
padding-left: 20px;
font-size: 14px;
line-height: 29px;
margin-bottom: 10px;
height: 29px;
}
.bar li:first-child {
margin-top: 10px;
}
.bar li:hover {
background-color: #b5d8e3;
}
.label-spoiler {
font-size: 12px;
margin-left: 10px;
border-bottom: solid 3px #adacac;
margin-bottom: 12px;
display: inline-block;
}
JavaScript
$(document).ready(function(){
$(".bar-spoiler ul").hide();
$(".label-spoiler").click(function(){
$(this).next().slideToggle('normal');
$(".label-spoiler").hide();
});
});