JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.open {
     visibility: hidden;
};

JavaScript

$('.button').on('click', function(){
	$('.subcat').toggleClass('open');
});
$('.subcat').on('click', function(){
	$('.subcat3').toggleClass('open');
});
$('.subcat2').on('click', function(){
	$('.subcat3').toggleClass('open');
});