JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

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 () {
    $('.level-box').slideUp();
    var current = $(this).closest('.box-a1').find('.level-box');
    if (current.is(':visible')) {
        current.slideUp();
    } else {
        current.slideDown();
    }
});