JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="checkbox-control"><span>Раз</span></div>
                            <div class="checkbox-group">
                                <div>
                                    <input type="checkbox" id=""><label for="">Каникулы</label>
                                </div>
                                <div>
                                    <input type="checkbox" id=""><label for="">Фотки с отпуска</label>
                                </div>
                                <div>
                                    <input type="checkbox" id=""><label for="">Курилка</label>
                                </div>
                                <div>
                                    <input type="checkbox" id=""><label for="">Дни рождения</label>
                                </div>
                            </div>
                            <div class="checkbox-control"><span>Два</span></div>
                            <div class="checkbox-group">
                                <div>
                                    <input type="checkbox" id=""><label for="">Каникулы</label>
                                </div>
                                <div>
                                    <input type="checkbox" id=""><label for="">Фотки с отпуска</label>
                                </div>
                                <div>
                                    <input type="checkbox" id=""><label for="">Курилка</label>
                                </div>
                                <div>
                                    <input type="checkbox" id=""><label for="">Дни рождения</label>
                                </div>
</div><div class="checkbox-control"><span>three</span></div>
                            <div class="checkbox-group">
                                <div>
                                    <input type="checkbox" id=""><label for="">Каникулы</label>
                                </div>
                   ...

CSS

.checkboxes-wrap{
    display: none;
    margin: 120px 0 0 20px;
    color: #000;
    font-size: 0.75em;
}

.checkboxes-wrap_active{
    display: block;
}
.checkbox-group > div{height:14px;padding:0 0 8px;font-size:14px;line-height:14px;}
.checkbox-group input[type=checkbox]{float:left;width:14px;height:14px;margin:0 5px 0 0}

.checkbox-control{
    margin: 110px 0 0;
    padding: 0 0 0 10px;
    background: url(images/check-control.png) no-repeat 0 -10px;
    color: #333;
}
.checkbox-control span{cursor:pointer}
.checkbox-control_active{
    background-position: 0 7px;
}

.checkbox-control span{
    border-bottom: 1px dashed #333;
}

.checkbox-group{
    display: none;
    margin: 10px 0 0 10px;
    color: #2067b0;
}

.checkbox-group_active{
    display: block;
}

JavaScript

var x=false;
$(".checkbox-control span").click(function() {
        $(".checkbox-group").not($(this).parent().next(".checkbox-group")).slideUp(200);
    $(this).parent().next(".checkbox-group").slideToggle(200);
});

$("label").click(function(){
   $(this).prev("input").attr("checked",  !$(this).prev("input").attr("checked" ));
});