JSFiddle - React, Tailwind, and code Playground

by Kiran Duggal

HTML

<div id="" class="wrapper p4t-sidebar-menu ">
  <ul class="p4t-sidebar-menu-all-modules">
  <li><a><span class="glyphicon glyphicon-remove hide-show-icon "></span> <span class=" glyphicon glyphicon-remove pin-right-icon pull-right"></span></a></li>
    <li><a><span class="glyphicon glyphicon-remove " data-toggle="collapse"></span> <span class="p4t-menu-name">My Pool4Tool</span></a></li>
    <li><a href="#p4t-sidebar-menu-dashboard" data-toggle="collapse" ><span class="glyphicon glyphicon-remove "></span> <span class="p4t-menu-name">Dashboard</span></a></li>
    
      <ul class="collapse" id="p4t-sidebar-menu-dashboard">
        <li>
         <a href="#p4t-sidebar-menu-sourcing-rfq-deluxe" data-toggle="collapse">
            <span class=" glyphicon  menu-left-icon"><span class="select-item-circle"></span></span>
            <span>RFI</span>
            <span class="glyphicon glyphicon-chevron-down pull-right menu-right-icon"></span>
          </a>
        </li>
        <li class="">
          <a href="#p4t-sidebar-menu-sourcing-rfq-deluxe" data-toggle="collapse">
            <span class=" glyphicon  menu-left-icon"><span class="select-item-circle"></span></span>
            <span>RQF Deluxe</span>
            <span class="glyphicon glyphicon-chevron-down pull-right menu-right-icon"></span>
          </a>
        </li>
      </ul>
     
    
    <li><a><span class="glyphicon glyphicon-remove " data-toggle="collapse"></span> <span class="p4t-menu-name">SRM</span></a></li>
    <li><a><span class="glyphicon glyphicon-remove " data-toggle="collapse"></span> <span class="p4t-menu-name">SCM</span></a></li>
    <li><a><span class="glyphicon glyphicon-remove " data-toggle="collapse"></span> <span class="p4t-menu-name">Projects</span></a></li>
    <li><a href="#p4t-sidebar-menu-sourcing" data-toggle="collapse"><span class="glyphicon glyphicon-remove "></span>
        <span class="p4t-menu-name">Sourcing</span></a>
    </li>

    <ul class="collapse"...

CSS

ul li{
  list-style-type:none;
}

no

JavaScript

$(document).ready(function() {
  // ADD AND REMOVES ACTIVE-STYLE CLASS FIRST LEVEL OF MENU
  $(document).on('click', '.p4t-sidebar-menu-all-modules > li > a', function() {
    $('.p4t-sidebar-menu-all-modules > li > a').each(function() {
      $(this).removeClass('active-item');
    });
    $(this).addClass('active-item');
  });

  // ADD AND REMOVES ACTIVE-STYLE CLASS SECOND LEVEL OF MENU

  $(document).on('click', '.p4t-sidebar-menu-all-modules > ul > li > a', function() {
    $('.p4t-sidebar-menu-all-modules > ul > li > a').each(function() {
      $(this).removeClass('active-sub-item');
      $(this).closest('.has-sub-menu').find('.menu-left-icon').css('visibility', 'hidden');
    });
    $(this).addClass('active-sub-item');
    $(this).find('.menu-right-icon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    $(this).closest('.has-sub-menu').find('.menu-left-icon').css('visibility', 'visible');
    if ($(this).hasClass('collapsed')) {
      $(this).removeClass('active-sub-item');
      $(this).closest('.has-sub-menu').find('.menu-left-icon').css('visibility', 'hidden');
    } else {

    }


  });


});