JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rawgithub.com/artberri/sidr-package/master/jquery.sidr.min.js"></script>
<link rel="stylesheet" href="http://rawgithub.com/artberri/sidr-package/master/stylesheets/jquery.sidr.light.css">
<a id="simple-menu" href="#sidr">Toggle menu</a>
 
<div id="sidr">
  <!-- Your content -->
  <ul>
    <li><a href="#">List 1</a></li>
    <li><a href="#" class="submenu-button">List 2</a>
        <ul class="submenu">
            <li><a href="#">Sub List 1</a></li>
            <li class="active"><a href="#">Sub List 2</a></li>
            <li><a href="#">Sub List 3</a></li>            
        </ul>  
    </li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>

CSS

.sidr ul.submenu {
    display:none;
}

JavaScript

$(document).ready(function() {
    $('#simple-menu').sidr({
        renaming: false
    });
    
    $('.submenu-button').click(function(e) {
        e.preventDefault();
        $(this).next().slideToggle();
    });
});