JSFiddle - React, Tailwind, and code Playground

by kirito0709

HTML

<div class="prop_wrapper" id="bx_117848907_18271_prop_192_cont">
	<span class="">Длина волос</span>
   <ul id="bx_117848907_18271_prop_192_list">
    <span id="controller_arrow" style="">&gt;</span>
    <li data-treevalue="192_497" data-onevalue="497" style="width: 100%;" class="bx_active">
      <i title="Для волос более 40 см"></i><span class="cnt" title="Для волос более 40 см">Для волос более 40 см</span></li>
		<li data-treevalue="192_498" data-onevalue="498" style="width: 100%;" class="">
      <i title="Длинные волосы"></i><span class="cnt" title="Длинные волосы">Длинные волосы</span></li>
		<li data-treevalue="192_499" data-onevalue="499" style="width: 100%;" class="">
      <i title="Средние волосы"></i><span class="cnt" title="Средние волосы">Средние волосы</span></li>
		<li data-treevalue="192_500" data-onevalue="500" style="width: 100%;" class="">
      <i title="Короткие волосы"></i><span class="cnt" title="Короткие волосы">Короткие волосы</span></li>
		<li data-treevalue="192_0" data-onevalue="0" style="width: 100%; display: none;" class="bx_missing">
      <i title="-"></i><span class="cnt" title="-">-</span></li>
	</ul>
	<div class="bx_slide_left" style="display: none;" id="bx_117848907_18271_prop_192_left" data-treevalue="192"></div>
	<div class="bx_slide_right" style="display: none;" id="bx_117848907_18271_prop_192_right" data-treevalue="192"></div>
</div>

CSS

.prop_wrapper{
width: 50%;
}
.prop_wrapper ul{
width: 100%;
margin-left: 0%;
border: 1px solid;
box-sizing: border-box;
height: 23px;
overflow: hidden;
position: relative;
padding-left: 0px;
list-style-type: none;
}
.prop_wrapper ul li{
display:none;
height: 23px;
padding-left:10px;
}
.prop_wrapper ul li.bx_active{
display:block;
background:#95e0a9;
}
.prop_wrapper ul.open{
height:unset;
}
.prop_wrapper ul.open li{
display:block;
}
#controller_arrow{
position: absolute;
height:23px;
padding-right:10px;
right:0;
cursor:pointer;
}
.prop_wrapper ul li span{
display:block;
}

JavaScript

$(document).ready(function(){
	$("#controller_arrow").click(function(){
		$("ul").toggleClass("open");
	});
  $(".prop_wrapper ul li span").click(function(){
  $(".prop_wrapper ul").toggleClass("open");
		$(".prop_wrapper ul li").removeClass("bx_active");
    $(this).parent().toggleClass("bx_active");
     return false;
	});
});