JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidebar__menu">
  <ul class="sidebar__menu-list">
    <li class="sidebar__menu-item">
      <a class="sidebar__menu-link" href="http://dbmast.ru">Главная</a>
    </li>
    <li class="sidebar__menu-item">
      <a class="sidebar__menu-link" href="#">Литература по дошкольному образованию</a>
      <ul class="drop">
        <li><a href="">Английский язык для дошкольников</a></li>
        <li><a href="#">Комплексного развитие ребенка</a></li>
        <li><a href="#">Математика для дошкольников</a></li>
        <li><a href="#">Окружающий мир для дошкольников</a></li>
        <li><a href="#">Письмо для дошкольников</a></li>
        <li><a href="#">Развитие мышления у дошкольника</a></li>
        <li><a href="#">Развитие речи дошкольников</a></li>

      </ul>
    </li>
    <li class="sidebar__menu-item">
      <a class="sidebar__menu-link" href="#">Пункт Меню - 2</a>
      <ul>
        <li><a href="#">Ссылка - 1</a></li>
        <li><a href="#">Ссылка - 2</a></li>
        <li><a href="#">Ссылка - 3</a></li>
        <li><a href="#">Ссылка - 4</a></li>
        <li><a href="#">Ссылка - 5</a></li>
        <li><a href="#">Ссылка - 6</a></li>
        <li><a href="#">Ссылка - 7</a></li>
        <li><a href="#">Ссылка - 8</a></li>
        <li><a href="#">Ссылка - 9</a></li>
      </ul>
    </li>
    <li class="sidebar__menu-item">
      <a class="sidebar__menu-link" href="#">Пункт Меню - 3</a>
      <ul>
        <li><a href="#">Ссылка - 1</a></li>
        <li><a href="#">Ссылка - 2</a></li>
        <li><a href="#">Ссылка - 3</a></li>
        <li><a href="#">Ссылка - 4</a></li>
        <li><a href="#">Ссылка - 5</a></li>
      </ul>
    </li>
    <li>
      <a class="sidebar__menu-link" href="#">Контакты</a>
    </li>
  </ul>
</div>

CSS

.sidebar__menu {
  margin: 0px auto;
  max-width: 270px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  overflow: hidden;
}

.sidebar__menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.sidebar__menu > ul > li {
  position: relative;
}

.sidebar__menu > ul > li > a {
  border-bottom: 1px solid #222;
  display: block;
  min-width: 140px;
  text-align: center;
  font-size: 13px;
  color: black;
  text-transform: uppercase;
  background: lighten($stack-color, 5%);
  text-decoration: none;
  padding: 5px 0;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

.sidebar__menu .sidebar__menu-item > ul {
  height: 0;
  overflow: hidden;
  background: #eee;
}

JavaScript

$(document).ready(function() {
  $(".sidebar__menu-item > a").click(function() {
    var ul = $(this).next(),
    /*var clone = ul.clone().css({
        "height": "auto"
      }).appendTo(".sidebar__menu");*/
    height = ul.css("height") === "0px" ? ul.scrollHeight + "px" : "0px";
    console.log(ul.css("height"));
    console.log("scrollHeight of ul: "+ul.scrollHeight);
    console.log (height);
    //clone.remove();
    ul.animate({
      "height": height
    });
    return false;
  });
  $('.sidebar__menu > ul > li > a').click(function() {
      $('.sidebar__menu-item a').removeClass('active');
      $(this).addClass('active');
    }),
    $('.sidebar__menu-item ul li a').click(function() {
      $('.sidebar__menu-item ul li a').removeClass('active');
      $(this).addClass('active');
    });
});