JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="demo">
    <div class="block">
      <ul>
        <li>Item 1.1.</li>    
        <li>Item 1.2.</li>
      </ul>
    </div>
    <div class="block">
      <ul>
        <li>Item 2.1.</li>    
        <li>Item 2.2.</li>
      </ul>
    </div>
    <div class="block">
      <ul>
        <li>Item 3.1.</li>    
        <li>Item 3.2.</li>
      </ul>
    </div>
  </div>
  <div class="menu">
    <ul>
      <li><h4 class="expand"><a href="#" title="expand/collapse">Slide Up/Down UL 1</a></h4></li>
      <li><h4 class="expand"><a href="#" title="expand/collapse">Slide Up/Down UL 2</a></h4></li>
      <li><h4 class="expand"><a href="#" title="expand/collapse">Slide Up/Down UL 3</a></h4></li>
    </ul>
  </div>
</body>

CSS

.demo {
    background:#aaa;
}

JavaScript

$(function() {
    $('.demo div').hide();

    $('.expand').click(function() {
        //find the matching nth element in the menu
        var $menuelement = $('.demo div').eq($(this).parent().index()); 
        if ($menuelement.hasClass('active')) { 
            //if clicked element is already expanded
            //remove the active class and hide it
            $menuelement.removeClass('active').slideUp(); 
        } else { 
            //otherwise,clicked element is not already expanded...
            if ($('.active').length > 0) { 
                //...but another element is expanded
                $('.active').removeClass('active').slideUp(function() {
                    //add the active class and show it
                    $menuelement.addClass('active').slideDown(); 
                });
            }
            else {
                //add the active class and show it
                $menuelement.addClass('active').slideDown(); 
            }
        }
    });

});