JSFiddle - React, Tailwind, and code Playground

HTML

<h3><i>+</i> 1</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><i>+</i> 2</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><i>+</i> 3</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;
 margin: 0px 
}
Ul{ display: none }

JavaScript

$(function(){
 $(document).ready(function(){
  $('H3').click(function(){
   if($(this).children('I').text() == '+'){
    $(this).children('I').text('-');
    $(this).next('Ul').slideToggle('slow');
   }
   else{
    $(this).children('I').text('+');
    $(this).siblings('Ul').slideUp('slow');
   }

   //$(this).next('Ul').slideToggle('slow').siblings('Ul').slideUp('slow');
  });
 });
});