JSFiddle - React, Tailwind, and code Playground

list tree transition+css

by hronic

HTML

<ul class="tree">
    <li><span>Животные</span>
      <ul>
        <li><span>Млекопитающие</span>
          <ul>
            <li>Коровы</li>
            <li>Ослы</li>
            <li>Собаки</li>
            <li>Тигры</li>
          </ul>
        </li>
        <li><span>Другие</span>
          <ul>
            <li>Змеи</li>
            <li>Птицы</li>
            <li>Ящерицы</li>
          </ul>
        </li>
      </ul>
    </li>
    <li><span>Рыбы</span>
      <ul>
        <li><span>Аквариумные</span>
          <ul>
            <li>Гуппи</li>
            <li>Скалярии</li>
          </ul>

        </li>
        <li><span>Морские</span>
          <ul>
            <li>Морская форель</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

CSS

li span {  transition: all .3s;}
    li span:after { content: ' -';}
    li span.action:after {content: ' +';}
    li span:hover {
      cursor:pointer;
      margin-left:10px;
    }
     ul { 
      max-height: 400px; 
      overflow: hidden;
      transition: all .5s ease-in-out;
    }
    .hide { max-height: 0; }

JavaScript

var link = document.querySelector('.tree');
    link.addEventListener('click', function(e){
      if(e.target.nodeName != 'SPAN') return
          e.target.classList.toggle('action');  
         e.target.nextElementSibling.classList.toggle('hide')
    });