JSFiddle - React, Tailwind, and code Playground

by Nilesh Injulkar

HTML

<input type="checkbox" id="parent1" />parent
<br/>
<div class="parent1" hidden="true">&nbsp;&nbsp;
    <input type="checkbox" class="parent1" hidden="true" />child1
    <br/>&nbsp;&nbsp;
    <input type="checkbox" class="parent1" hidden="true" />child2
    <br/>&nbsp;&nbsp;
    <input type="checkbox" class="parent1" hidden="true" />child3
    <br/>
</div>
<input type="checkbox" id="parent2" />parent
<br/>
<div class="parent2" hidden="true">&nbsp;&nbsp;
    <input type="checkbox" class="parent2" hidden="true" />child1
    <br/>&nbsp;&nbsp;
    <input type="checkbox" class="parent2" id="parent3" hidden="true"
    />child2-parent
    <br/>
</div>
<div class="parent3" hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="parent3" hidden="true"
    />child1
    <br/>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="parent3" hidden="true"
    />child2
    <br/>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="parent3" hidden="true"
    />child3
    <br/>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="parent3" hidden="true"
    />child4
    <br/>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="parent3" id="parent4"
    hidden="true" />child5-parent
    <br/>
</div>
<div class="parent4" hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="parent4"
    hidden="true" />child1
    <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="parent4"
    hidden="true" />child2
    <br/>
</div>

JavaScript

$(function () {
    $(':checkbox').change(function () {
        $("input[type='checkbox']:checked").each(function () {
            var inner_id = $(this).attr('id');
            if (inner_id.search("parent") > -1) {
                //   $("input."+inner_id).attr('hidden','false')
                $("."+inner_id).removeAttr("hidden");
            }
        });
    });
});

$(function () {
    $(':checkbox').click(function () {
        var is_chk = $(this).attr('checked');
        var its_id = $(this).attr('id');
        if (is_chk != 'checked') {
            $("."+its_id).attr('hidden', 'true');
        }
    });
});