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');
            //alert(a);
            if(!a)
            {
                //alert(!a);
                nextPreview.show("slow");
                topic.toggleClass('topicOn');
                nextPreview.toggleClass('deployed');
            }
            else if(a = nextPreview)
            {
                //alert(true)
                if(nextPreview.hasClass('deployed'))
                {
                    a.hide("slow");
                    topic.toggleClass('topicOn');
                    a.toggleClass('deployed');
                }
                else
                {
                    a.show("slow");
                    topic.toggleClass('topicOn');
                    nextPreview.toggleClass('deployed');
                }
            }
            else
            {
                a.hide("slow");
                b.toggleClass('topicOn');
                nextPreview.show("slow");
                topic.toggleClass('topicOn');
                nextPreview.toggleClass('deployed');
            }
            
            a = nextPreview;
            b = topic;
        }
    });