JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="harmonica-menu">
    
    <!-- начало категории 1 -->
	<a class="CatName">Категория 1</a><!-- категория -->
    
    <!-- начало под категории в 1 -->
	<div class="harmonica-menu-hidden" style="display: none;">

        <div class="pod-harmonica-menu">
	        <a class="PodCatName">Под категория 1.1</a><!-- под категория -->
            
	        <div class="pod-harmonica-menu-hidden" style="display: none;">
		        <a href="#">Под под категория 1.1.1</a>
		        <a href="#">Под под категория 1.1.2</a>
		        <a href="#">Под под категория 1.1.3</a>
	        </div><!-- конец под под категории в 1.1 -->
            

	        <a class="PodCatName">Под категория 1.2</a><!-- под категория -->
            
	        <div class="pod-harmonica-menu-hidden" style="display: none;">
		        <a href="#">Под под категория 1.2.1</a>
		        <a href="#">Под под категория 1.2.2</a>
		        <a href="#">Под под категория 1.2.3</a>
	        </div><!-- конец под под категории в 1.2 -->
            
        </div>
        
	</div><!-- конец под категории в 1 -->
    
    
	<a class="CatName">Категория 2</a><!-- категория -->
    
    <!-- начало под категории в 2 -->
	<div class="harmonica-menu-hidden" style="display: none;">

        <div class="pod-harmonica-menu">
            
            
	        <a class="PodCatName">Под категория 2.1</a><!-- под категория -->
            
	        <div class="pod-harmonica-menu-hidden" style="display: none;">
		        <a href="#">Под под категория 2.1.1</a>
		        <a href="#">Под под категория 2.1.2</a>
		        <a href="#">Под под категория 2.1.3</a>
	        </div><!-- конец под под категории в 2.1 -->
            
            
	        <a class="PodCatName">Под категория 2.2</a><!-- под категория -->
            
	        <div class="pod-harmonica-menu-hidden" style="display: none;">
		        <a href="#">Под под категория 2.2.1</a>
		        <a href="#">Под под категория 2.2.2</a>
		        <a href="#">Под...

CSS

.harmonica-menu {
	width: 250px;
}


	.harmonica-menu a, .harmonica-menu .CatName {
		display: block;
		padding: 5px 5px 5px 15px;
		color: #62A2F7;
		font-weight: bold;
		text-decoration: underline;
		font-size: 14px;
		cursor: pointer;
		margin: 0;
	}
	
	.harmonica-menu-hidden {
		display: none;
		padding: 5px 5px 5px 20px;
	}
	
		.harmonica-menu-hidden a {
			font-weight: normal;
			padding: 5px;
		}

	.harmonica-menu a, .harmonica-menu .PodCatName {
		display: block;
		padding: 5px 5px 5px 15px;
		color: #4072b4;
		font-weight: bold;
		text-decoration: underline;
		font-size: 14px;
		cursor: pointer;
		margin: 0;
	}


	.pod-harmonica-menu-hidden {
		display: none;
		padding: 5px 5px 5px 20px;
	}
	
		.pod-harmonica-menu-hidden a {
			font-weight: normal;
			padding: 5px;
		}

JavaScript

$(document).ready(function() {
    $('.harmonica-menu .CatName').click(function() {
        $(this).next('.harmonica-menu-hidden').slideToggle();
        $(this).toggleClass('open');
    });
});
$(document).ready(function() {
    $('.pod-harmonica-menu .PodCatName').click(function() {
        $(this).next('.pod-harmonica-menu-hidden').slideToggle();
        $(this).toggleClass('open');
    });
});