JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<nav> 
  <ul>
    <li class="test"><a href="#">Menu 1 <i class="fa fa-plus"></i></a>
       <ul>
         <li><a href="#11">Sub menu 1</a></li>
         <li><a href="#12">Sub menu 2</a></li>   
         <li><a href="#13">Sub menu 3</a></li>                       
       </ul>
    </li>
    <li class="test"><a href="#">Menu 2 <i class="fa fa-plus"></i></a>
       <ul>
         <li><a href="#21">Sub menu 1</a></li>
         <li><a href="#22">Sub menu 2</a></li>                       
       </ul>
    </li> 
  </ul>
</nav>

CSS

.fa-plus
{
background-color:red;
    font:14px;
}

.fa-minus
{
    background-color:blue;
    font:10px;
}

JavaScript

jQuery(document).ready(function () {
    jQuery('.test').on('click', function(){
        jQuery('nav ul ul').hide();
        jQuery(this).find('i').addClass('fa-plus');
        jQuery(this).children('nav ul ul').slideDown();
        jQuery(this).find('i').removeClass('fa-plus').addClass('fa-minus');
        return false;  
    });
});