Animacja w rozwijanym menu

<style>

ul li ul
{
  display:none
}

li ul
{
  padding-left:0;
  transition:all 1s
}

li.opened ul
{
  display:block;
  padding-left:25px;
}
</style>


<ul>
  <li>AAA</li>
  <li class="has_child">OPEN ME

    <ul>
      <li>BBB</li>
      <li>BBB</li>
      <li>BBB</li>
      <li>BBB</li>
      <li>BBB</li>
    </ul>

  </li>
  <li>AAA</li>
  <li>AAA</li>
  <li>AAA</li>
</ul>



<script>

  let els = document.getElementsByClassName('has_child');
  
  
  for (var i = 0; i < els.length; i++)
  {
    var el = els[i];
  
    el.addEventListener('click', function()
    {
      this.classList.toggle('opened');
  
    }, false);
  
  
  }
  
  </script>