JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bla-bla">
<div class="search-more">
                        <a class="detailed_search"><span>Подробный поиск</span></a>
                        <fieldset class="search-more-controls">
                            <div class="control-wrap"><label for="">Интересы</label><input type="text"></div>
                            <div class="control-wrap control-wrap_even"><label for="">Должность</label><select name="" id=""></select></div>
                            <div class="control-wrap"><label for="">Район\город</label><select name="" id=""></select></div>
                            <div class="control-wrap control-wrap_even"><label for="">Навыки и компетенции</label><select name="" id=""></select></div>
                            <div class="control-wrap"><label for="">Филиал</label><select name="" id=""></select></div>
                            <div class="control-wrap control-wrap_even"><label for="">Интересы</label><select name="" id=""></select></div>
                        </fieldset>
</div>
</div>

<div class="bla-bla">
<div class="search-more">
                        <a class="detailed_search"><span>Подробный поиск</span></a>
                        <fieldset class="search-more-controls">
                            <div class="control-wrap"><label for="">Интересы</label><input type="text"></div>
                            <div class="control-wrap control-wrap_even"><label for="">Должность</label><select name="" id=""></select></div>
                            <div class="control-wrap"><label for="">Район\город</label><select name="" id=""></select></div>
                            <div class="control-wrap control-wrap_even"><label for="">Навыки и компетенции</label><select name="" id=""></select></div>
                            <div class="control-wrap"><label for="">Филиал</label><select name="" id=""></select></div>
                            <div class="control-wrap control-wrap_even"><label for="">Интересы</label><select name=""...

CSS

.bla-bla{
background: #ccc;
}
.search-more_active{
    background: #fff7ed;
}

.search-more-controls{
    clear: both;
    display: none;
    border: 0;
    padding: 0;
}

.search-more-controls_active{
    display: block;
}
.control-wrap{
    display: inline-block;
    margin: 12px 0 0 20px;
    color: #000;
}

.control-wrap_even{
    margin: 12px 0 0 50px;
}

.control-wrap label{
    display: block;
}.checkboxes-wrap{
    display: none;
    margin: 12px 0 0 20px;
    color: #000;
    font-size: 13px;
}

.checkboxes-wrap_active{
    display: block;
}

JavaScript

$(".detailed_search").click(function () {
    $(".search-more").not($(this).parent()).children('.search-more-controls').slideUp(200);
    $(this).parent().toggleClass("search-more_active");
    $(this).next(".search-more-controls").slideToggle(200);
    $(".checkboxes-wrap").toggleClass("checkboxes-wrap_active");
});



//$(".detailed_search").click(function() {
//        $(".search-more").toggleClass("search-more_active");
//        $(".search-more-controls").toggleClass("search-more-controls_active");
//        $(".checkboxes-wrap").toggleClass("checkboxes-wrap_active");
//   })