JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main_list">
 <li class="parent">
     <a href="##########">Menu-1</a>
   <ul class="children">
    <li>
     <a href="##########">SubMenu-1</a>
     <a href="##########">SubMenu-2</a>
     <a href="##########">SubMenu-3</a>
    </li>
   </ul>
 </li>
 <li><a href="##########">Menu-2</a></li>
 <li><a href="##########">Menu-3</a></li>
 <li><a href="##########">Menu-4</a></li>
 <li class="parent">
  <a href="##########">Menu-5</a>
   <ul class="children">
    <li>
     <a href="##########">SubMenu-1</a>
     <a href="##########">SubMenu-2</a>
     <a href="##########">SubMenu-3</a>
    </li>
   </ul>
  </li>
</ul>

CSS

ul.children {
    display: none;
}

JavaScript

$('.main_list .parent').prepend('<span class="show">Show</span>');

$(document).on('click', '.main_list .show',function(event){

    $(this).siblings('.children').show(); //or whatever show-function you want to use
    $(this).removeClass('show').addClass('hide');
    $(this).text('Hide');

});

$(document).on('click', '.main_list .hide',function(event){

    $(this).siblings('.children').hide(); //or whatever show-function you want to use
    $(this).removeClass('hide').addClass('show');
    $(this).text('Show');

});