JSFiddle - React, Tailwind, and code Playground
HTML
<div class="menu">
<div class="outer">
<div class="title">one</div>
<div class="inner">
<div class="item">111111</div>
<div class="item">222222</div>
</div>
</div>
<div class="outer">
<div class="title">two</div>
<div class="inner">
<div class="item tag">3333333</div>
<div class="item">4444444</div>
</div>
<div class="title">three</div>
<div class="inner">
<div class="item">555555</div>
<div class="item">555555</div>
</div>
</div>
</div>
<button class="btn">click</button>
CSS
.outer {
width: 200px;
background-color: green;
}
.inner {
width: 160px;
margin-bottom: 15px;
}
.item {
background-color: red;
margin-bottom: 10px;
}
JavaScript
$('.btn').click(function() {
$('.outer').not(':has(.tag)').slideToggle('600', function(){
$('.inner').not(':has(.tag)').slideToggle('600');
});
});