JSFiddle - React, Tailwind, and code Playground

HTML

<li class="slidedown">
  <a href="#">Parent Link</a>
  <!-- Dropdown arrow -->
  <span class="slidedown-toggle">
    <span class="caret">
        <button id="click">click</button>
    </span>
  </span>
  <!-- Submenu -->
    <div class="nav-sub-holder closed">
  <ul class="nav nav-sub">
    <li>
      <a href="#">Child Menu Item 1</a>
    </li>
          <li>
      <a href="#">Child Menu Item 1</a>
    </li>
          <li>
      <a href="#">Child Menu Item 1</a>
    </li>
  </ul>
    </div>
</li>

CSS

.nav-sub {
    height:auto;
    background-color:#eee;

}

.nav-sub-holder {
       -webkit-transition:  height 2s ease;  
    -moz-transition: height 2s ease;  
    -o-transition: height 2s ease;    
    transition: height 2s ease;  
    overflow:hidden;    
height:100px;

}


.closed {
    height:0px;
    overflow:hidden;
 
}

JavaScript

$('#click').click(function() {

    $('.nav-sub-holder').toggleClass('closed');
  } );