JSFiddle - React, Tailwind, and code Playground

HTML

<div class="head">
Menu
</div>
<!--1st toggle div-->
 <div class="body" style="display:none; margin-top:10px;">
     
 <div class="head">
     Menu 1
    </div>
     <!--2nd toggle div-->
     <div class="body" style="display:none; background-color:gray; width:100px;">
     Content 1
     </div>
     
      <div class="head2">
     Menu 2
    </div>
      <!--2nd toggle div-->
     <div class="body2" style="display:none; background-color:blue; width:100px;">
     Content 2
     </div>
     
     <div class="head3">
     Menu 3
    </div>
      <!--2nd toggle div-->
     <div class="body3" style="display:none; background-color:yellow; width:100px;">
     Content 3
     </div>
     
     <div class="head4">
     Menu 4
    </div>
      <!--2nd toggle div-->
     <div class="body4" style="display:none; background-color:green; width:100px;">
     Content 4
     </div>
     
     
 </div>

JavaScript

$(document).ready(function(){
    $('.head').click(function() {
        $(this).siblings('.body:first').toggle('slow')
  });
    
    $('.head2').click(function() {
        $(this).siblings('.body2:first').toggle('slow')
  });
    
    $('.head3').click(function() {
        $(this).siblings('.body3:first').toggle('slow')
  });
    
    $('.head4').click(function() {
        $(this).siblings('.body4:first').toggle('slow')
  });
});