JSFiddle - React, Tailwind, and code Playground

HTML

<h2 class="topic"><span>Пункт 1</span></h2>
<div class="preview">
    <p>Описание пункт 1 Описание пункт 1 Описание пункт 1 Описание пункт 1 Описание пункт 1 Описание пункт 1 Описание пункт 1 Описание пункт 1 Описание пункт 1 Описание пункт 1 </p>
    <p>Описание пункт 1 Описание пункт 1 Описание пункт 1 Описание пункт 1 Описание пункт 1 Описание пункт 1 Описание пункт 1 Описание пункт 1 Описание пункт 1 Описание пункт 1 </p>
</div>
<h2 class="topic"><span>Пункт 2</span></h2>
<div class="preview">
    <p>Описание Пункт 2 Описание Пункт 2 Описание Пункт 2 Описание Пункт 2 Описание Пункт 2 Описание Пункт 2 Описание Пункт 2 Описание Пункт 2 Описание Пункт 2 </p>
    <p>Описание Пункт 2 Описание Пункт 2 Описание Пункт 2 Описание Пункт 2 Описание Пункт 2 Описание Пункт 2 Описание Пункт 2 Описание Пункт 2 Описание Пункт 2 </p>
</div>
<h2 class="topic"><span>Пункт 3</span></h2>
<div class="preview">
    <p>Описание пукта 3 Описание пукта 3 Описание пукта 3 Описание пукта 3 Описание пукта 3 Описание пукта 3 Описание пукта 3 Описание пукта 3 Описание пукта 3 </p>
    <p>Описание пукта 3 Описание пукта 3 Описание пукта 3 Описание пукта 3 Описание пукта 3 Описание пукта 3 Описание пукта 3 Описание пукта 3 Описание пукта 3 </p>
</div>

CSS

.preview{
display: none;
}

.topic{
border: 1px solid red;
}

    .topic{
    cursor: pointer;
    }

.topicOn{
background-color: yellow;
}

JavaScript

$(document).ready(function()
    {
        $('.topic > span').bind('click', clickHandler);
        var a="";
        function clickHandler(obj)
        {
            var nextPreview = $(obj.target).parent('.topic').next('.preview');
            var topic = $(obj.target).parent('.topic');
            if(!a)
            {
                nextPreview.show("slow");
                topic.toggleClass('topicOn');
                nextPreview.toggleClass('deployed');
            }        
            else if(nextPreview.hasClass('deployed'))
            {
                nextPreview.hide("slow");
                topic.toggleClass('topicOn');
                a.toggleClass('deployed');
            }
            else
            {
                a.hide("slow");
                b.removeClass('topicOn');
                a.removeClass('deployed');
                nextPreview.show("slow");
                topic.toggleClass('topicOn');
                nextPreview.toggleClass('deployed');
            }
            a = nextPreview;
            b = topic;    
        }
    });