JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-l1">
    <div class="box-a1">
        <h2 class="header">
          Header
        </h2>   

        <div class="level-box">
          <label>Test Input</label>
          <input type="text">
        </div>
    </div> <!-- box-a1 -->
    <div class="box-a1">
        <h2 class="header">
          Header 2
        </h2>   

        <div class="level-box">
          <label>Test Input</label>
          <input type="text">
        </div>
    </div> <!-- box-a1 -->
    <div class="box-a1">
        <h2 class="header">
          Header 3
        </h2>   

        <div class="level-box">
          <label>Test Input</label>
          <input type="text">
        </div>
    </div> <!-- box-a1 -->
</div>

CSS

.grid-l1{ width: 500px; height: auto; min-height: 500px; overflow: hidden; padding: 10px; background: #000; }
.header{ width: 100%; text-align: left; background: #fff; color: #000; font-size: 14px; text-transform: uppercase; font-weight: bold; padding: 5px; cursor: pointer; margin: 0px !important; }
.level-box{ width: 100%; height: auto; overflow: hidden; background: #ededed; padding: 10px; display: none; }
.box-a1{ width: 100%; height: auto; overflow: hidden; margin: 5px 0px; }

JavaScript

$('body').on('click', '.header', function() {
    var $box = $(this).closest('.box-a1');
    $box.siblings().find('.level-box').stop().slideUp();
    $box.find('.level-box').stop().slideToggle();
});