JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">
    <h2>maincat</h2>
    <div class="subcat">
        <h2>subcat</h2>
        <div class="subcat2">
            <h3>subcat2</h2>
            <div class="subcat3">
                <h4>subcat3</h4>
            </div>
        </div>
    </div>
</div>

JavaScript

$('.subcat').hide().addClass('open');
$('.subcat2').hide().addClass('open');
$('.subcat3').hide().addClass('open');
$('.button').on('click', function(){
	if ($('.subcat').hasClass('open')){
    	$('.subcat').show().removeClass('open');
    }
    else {
    	$('.subcat').hide().addClass('open');
    
    }
});
$('.subcat').on('click', function(){
	if ($('.subcat2').hasClass('open')){
    	$('.subcat2').show().removeClass('open');
    }
    else {
    	$('.subcat2').hide().addClass('open');
    
    }
});
$('.subcat2').on('click', function(){
	if ($('.subcat3').hasClass('open')){
    	$('.subcat3').show().removeClass('open');
    }
    else {
    	$('.subcat3').hide().addClass('open');
    
    }
});