JSFiddle - React, Tailwind, and code Playground

by Rashit1122233

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="page">
		<aside id="aside-menu">
			<div class="con">
			  <div class="category  open">
				<p class="active">ГЛАВА-1</p>
				<ul style="display:block" class="menu-sub">
					<li class="menu-list">LIST-1</li>
					<li class="menu-list">LIST-2</li>
					<li class="menu-list">LIST-3</li>
					<li class="menu-list">LIST-4</li>
					<li class="menu-list">LIST-5</li>
				</ul>
			</div>
			<div class="category">
				<p>ГЛАВА-2</p>
				<ul class="menu-sub">
					<li class="menu-list">LIST-1</li>
					<li class="menu-list">LIST-2</li>
					<li class="menu-list">LIST-3</li>
					<li class="menu-list">LIST-4</li>
					<li class="menu-list">LIST-5</li>
				</ul>
			</div>
			<div class="category">
				<p>ГЛАВА-3</p>
				<ul class="menu-sub">
					<li class="menu-list">LIST-1</li>
					<li class="menu-list">LIST-2</li>
					<li class="menu-list">LIST-3</li>
					<li class="menu-list">LIST-4</li>
					<li class="menu-list">LIST-5</li>
				</ul>
			</div>
			</div>
		</aside>
	</div>
</body>
</html>

CSS

*{
	margin: 0;
	padding: 0;
}


body{
	background: #ffffff;
	width: 100%;
	height: 100%;
}
li{
	list-style: none;
}
a{
	text-decoration: none;
}
p{
	padding: 10px;
}
#page{
	width: 300px;
	height: 100%;
	margin: 0 auto;
	background: #ffffff;
	z-index: 1;
	/*display: flex;*/
}
/*
color:#3D4C5A
color:#364150
color:#26A69A
color:#36C6D3*/
/*----------------==========MENU=========----------------*/
#aside-menu{
	background: #393939;
	color: #fff;
	width: 250px;
	float: left;
	height: 100%;
	position: fixed;
	overflow: auto;
	z-index: 2;
	/*flex-shrink:0;*/
}


#aside-menu::-webkit-scrollbar {
        width: 0 !important;
}

.category>p{
	padding: 10px;
  border-left:7px solid #393939;
}
.category>p:hover{
	background: #2e2e2e;
	cursor: pointer;
  border-left:7px solid #2e2e2e;
}
.active{
	background: #2e2e2e;
  border-left:7px solid #fff000!important;
}
.menu-sub{
	display: none;
	background: #ff4d4d;
}
.menu-list{
	padding: 5px;
  text-align:center;
}
.menu-list:hover{
	background: #3D4C5A;
	cursor: pointer;
}

/*----------------==========MENU=========----------------*/

JavaScript

$('.con>div:has(ul)').click(function(e){
 	e.preventDefault();
		
    
    if ($(this).hasClass("open")) {
       $(this).removeClass('open');
       $(this).children('ul').slideUp(200);
       }
    else{
    	$('.con>div ul').slideUp();
      //$('.con>div ').removeClass('open active');
      $('.con>div ').removeClass('open');
      
      
      $('.con>div>p ').removeClass('active');
      
      //$(this).addClass('open active');
      $(this).addClass('open');
      $(this).children('p').addClass('active');
       $(this).children('ul').slideDown(200);
       console.log('click');
    }
});
$('.con>div ul li').on('click', function(e) {
  e.stopPropagation();
 
});