JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="side">
			
				<li><a href="#">File1</a></li>
				<li class="first-level"><a href="#">File2</a>
				
					<ul>
					
						<li><a href="#">Sub-File1</a>
							
							<ul class="second-level">
					
								<li><a href="#">Sub-sub-File1</a></li>
								<li><a href="#">Sub-sub-File1</a></li>
								
					
							</ul>
						
						</li>
						<li><a href="#">Sub-File2</a></li>
						
					
					</ul>
				
				</li>
				<li><a href="#">File3</a></li>
			
			</ul>

CSS

body{ padding: 0; margin: 0; background-color: #e9e9e9;}
a,img{ border: none;}
ul{ padding: 0; margin: 0;}
li{ margin:0; list-style: none;}

.sidepanel{ width: 30%; position: fixed;  background-color: #353535; top: 0; bottom: 0; float: left;}
.rightpanel{ width: 66%; float: right; padding: 2%;}
.menu{ float: right; margin-right: 10px; margin-top: 10px; cursor: pointer;}

ul.side {
    clear: both;
    float: left;
    margin-top: 10px; width: 100%;}
	
ul.side a {
    float: left;
    width: 50%;
	border-bottom: solid 1px #494949; padding: 15px 3%; text-decoration: none; color: #000; text-align: right;}

	ul.side a:hover{ background-color: #000; color: #eee;}
	
	/*ul.side ul{ display: none;}*/

JavaScript

$(document).ready(function(){
	var rr = true;
		$('ul.side > li.first-level > ul').hide();
	
		$('ul.side > li.first-level').click(function(){
		
			if(rr===true){
			$(this).children('ul').slideDown(250);
			rr = false;
			}
			
			else{
			$(this).children('ul').slideUp(250);
			rr = true;
			
			}
			
		});
	
	});