JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">Hey All
    <div>a</div>
    <div>b</div>
    <div>c
        <button class="hide" data-type="parent">Hide Parent</button>
        <button class="hide" data-type="children">Hide Children</button>
    </div>
</div>
<div class="parent">Hey All 1
    <div>a</div>
    <div>b</div>
    <div>c
        <button class="hide" data-type="parent">Hide Parent</button>
        <button class="hide" data-type="children">Hide Children</button>
    </div>
</div>

CSS

.parent > div {
    margin-left : 20px;
    border:1px solid black;
    display : none;
}

JavaScript

$('.parent').click(function () {
    $(this).children().css('display', 'block');
});

$('.hide').click(function (e) {
    e.stopPropagation();
    var type = $(this).data('type');
    var parent = $(this).closest('.parent');
    
    if (type === "parent") parent.css('display', 'none');
    else parent.children().css('display', 'none');
});