JSFiddle - React, Tailwind, and code Playground

by sensei

HTML

<div class="wrap">
    <div class="cont">
        <div class="trigger">Триггер1</div>
        <div class="block">блок1</div>
    </div>
    <div class="cont">
        <div class="trigger">Триггер2</div>
        <div class="block">Блок2</div>
    </div>
</div>

CSS

.wrap{
        width: 600px;
        height: 250px;    
        margin: 50px auto;
        padding: 50px;
        border: 1px solid #ccc;
    }

    .cont{
        float: left;
        width: 49%;
        margin-left: 1%
    }

    .cont:first-child{
        margin: 0;
    }

    .trigger{
        display: inline-block;
        background: #ccc;
    }
    .block{
        display: none;
        height: 200px;
        border: 1px solid #000;
    }

JavaScript

$('.trigger').on('click', function() {
    $(this).parent().siblings().children('.block').slideUp(300);
    $(this).siblings('.block').slideToggle(300);
})

$(document).on('click', function(e) {
    if($(e.target).parents('.cont').length != 1)
        $('.block').slideUp(300);
})