Collapsible menu: Having trouble with transition for my submenu

Keywords: html css bootstrap-4

Question: 

I am trying to make a collapsible sidebar by myself using bootstrap only. I need some help with transitions for my submenu. Everything else works as intended so far.

I have already tried to wrap elements with different containers and make them collapsible. I have also tried to move my submenu to different places in my mainMenu. Nothin worked.

This is where my submenu is placed:

<li>
    <a>
      <span class="menuItemIcon fas fa-tachometer-alt"></span>
      <span class="menuItemText collapse show width">
        <p class="menuItemTextWrapper">Tintenfische</p>
      </span>
    </a>
    <ul id="subMenu" class="collapse show">
      <li class="collapse show width">
          <a href="#">
            <span class="menuItemIcon fas fa-tachometer-alt"></span>
            <span class="menuItemText">
              <p class="menuItemTextWrapper">Schmecken nicht!</p>
            </span>                
          </a>
      </li>
      <li class="collapse show width">
          <a href="#">
            <span class="menuItemIcon fas fa-tachometer-alt"></span>
            <span class="menuItemText">
              <p class="menuItemTextWrapper">Schmecken nicht!</p>
            </span>                
          </a>
      </li>
     </ul>
  </li>

Here you can see the rest of my code: https://jsfiddle.net/iButters/p14ajx7d/240/

I want my menu to collapse smoothly. Actually my submenu has no transition, its just disappearing.

Answers: