JSFiddle - React, Tailwind, and code Playground

by Ilia Lesnykh

HTML

<h3>показать</h3>

<ul>
    <li><a href='.../1.1.html' target='_self'>1.1</a>
    </li>
    <li><a href='.../1.2.html' target='_self'>1.2</a>
    </li>
    <li><a href='.../1.3.html' target='_self'>1.3</a>
    </li>
</ul>

<h3>показать</h3>

<ul>
    <li><a href='.../2.1.html' target='_self'>2.1</a>
    </li>
    <li><a href='.../2.2.html' target='_self'>2.2</a>
    </li>
    <li><a href='.../2.3.html' target='_self'>2.3</a>
    </li>
    <li><a href='.../2.4.html' target='_self'>2.4</a>
    </li>
</ul>

<h3>показать</h3>

<ul>
    <li><a href='.../3.1.html' target='_self'>3.1</a>
    </li>
    <li><a href='.../3.2.html' target='_self'>3.2</a>
    </li>
</ul>

CSS

h3 {
    cursor:pointer;
}
ul {
    display: none;
}

JavaScript

$(function () {
     $('H3').click(function () {
         var $header = $(this);
         $('ul').hide();
         if ($header.text() == 'показать') {
             $header.text('скрыть');
         } else {
             $header.text('показать');
         }
         $header.next('ul').slideToggle();
     });
 });