JSFiddle - React, Tailwind, and code Playground

by switch74

HTML

<div class="items">
<div class="item">
    <a>Заголовок1</a>
    <div class="left">
        Скрытый текст1
    </div>
</div>
<div class="item">
    <a>Заголовок2</a>
    <div class="center">
        Скрытый текст2
    </div>
</div>
<div class="item">
    <a>Заголовок3</a>
    <div class="right">
        Скрытый текст3
    </div>
</div>
</div>

CSS

.items{
    display:table;
    width:100%;
}
.items>.item{
    display:table-cell;
}
.item>a{
    cursor:pointer;
}
.item>div{
    display:none;
    position:absolute;
    width:50%;
    background:#bbb;
}
.item>div.left{
    margin:10px 0px 0px 10px;
}
.item>div.center{
    margin:20px 0px 0px -10%;    
}
.item>div.right{
    margin:0px 0px 0px -20%;
}

JavaScript

$('.item>a').click(function()
{
    var visible = $(this).next().is(":visible");
    $('.item>div').slideUp(400);
    if(!visible) $(this).next().stop().slideDown(400);
    
});