JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<div class="advanced-sidebar-nav advanced-sidebar-nav-default"><ul id="menu-sidebar-menu" class="advanced-sidebar-menu"><li id="menu-item-4701" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4701"><a href="#">Laptops<span class="advanced-sidebar-nav-toggle"></span></a>
<ul class="sub-menu">
    <li id="menu-item-4943" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4943"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/celeron/" style="padding-left:40px !important">Celeron</a></li>
    <li id="menu-item-5103" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-5103"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/amd/" style="padding-left:40px !important">AMD</a></li>
    <li id="menu-item-4696" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4696"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/i3/" style="padding-left:40px !important">i3</a></li>
    <li id="menu-item-4697" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4697"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/i5/" style="padding-left:40px !important">i5</a></li>
    <li id="menu-item-4698" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4698"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/i7/" style="padding-left:40px !important">i7</a></li>
    <li id="menu-item-4695" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4695"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/game-laptops/" style="padding-left:40px !important">Game laptops</a></li>
</ul>
</li>
<li id="menu-item-4703" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4703"><a...

CSS

.advanced-sidebar-nav ul, .advanced-sidebar-nav ul ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.advanced-sidebar-nav * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.advanced-sidebar-nav:after {
  content: "";
  display: table;
  clear: both;
}

.advanced-sidebar-nav .advanced-sidebar-nav-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -12px;
  width: 25px;
  height: 25px;
  border-radius: 2px;
  z-index: 1;
  cursor: pointer;
}

.advanced-sidebar-nav .advanced-sidebar-nav-toggle:before, .advanced-sidebar-nav .advanced-sidebar-nav-toggle:after {
  content: "";
  position: absolute;
  -webkit-transition: -webkit-transform 0.25s ease-out;
  transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}

.advanced-sidebar-nav .advanced-sidebar-nav-toggle:before {


}

.advanced-sidebar-nav .advanced-sidebar-nav-toggle:after {
  font-family: FontAwesome;
  content: "\f105";
  font-size: 14px;
  font-weight: normal;

}

.advanced-sidebar-nav .advanced-sidebar-nav-toggle.advanced-sidebar-nav-toggle-open {
  cursor: pointer;
}

.advanced-sidebar-nav .advanced-sidebar-nav-toggle.advanced-sidebar-nav-toggle-open:before {

}

.advanced-sidebar-nav .advanced-sidebar-nav-toggle.advanced-sidebar-nav-toggle-open:after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.advanced-sidebar-nav ul ul {
  display: none;
}

.advanced-sidebar-nav ul li {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  border: none;
}

.advanced-sidebar-nav ul li:hover {
  -webkit-transform: none !important;
          transform: none !important;
}

.advanced-sidebar-nav ul li.current-menu-item > a, .advanced-sidebar-nav ul li.current-menu-ancestor > a {
  -webkit-transform: none !important;
          transform: none !important;
}

.advanced-sidebar-nav ul...

JavaScript

jQuery(document).ready(function() {
    // insert toggle button
    jQuery(".advanced-sidebar-nav").each(function() {
        jQuery(".menu-item-has-children", jQuery(this)).each(function() {
            // insert toggle button
            jQuery("> a", jQuery(this)).append(
                '<span class="advanced-sidebar-nav-toggle"></span>'
            );

            // add indent
            var depth = jQuery(this).parents(".menu-item-has-children").length;
            jQuery("ul li a", jQuery(this)).attr(
                "style",
                "padding-left:" + (depth + 2) * 20 + "px !important"
            );

            // open nav menu toggle
            if (jQuery("ul", jQuery(this)).css("display") == "block") {
                jQuery(".advanced-sidebar-nav-toggle", jQuery(this)).addClass(
                    "advanced-sidebar-nav-toggle-open"
                );
            }
        });
    });
    jQuery(".advanced-sidebar-nav").on(
        "click",
        ".dropdown > a:first-child",
        function(e) {
        e.preventDefault();     
           const self = $(this).find(".advanced-sidebar-nav-toggle");


            jQuery(".advanced-sidebar-nav-menu-open").each(
              function() {
                  $(this).find(".advanced-sidebar-nav-toggle").parent("a").removeClass("advanced-sidebar-nav-menu-open").siblings("ul").slideUp(300);
                  $(this).find(".advanced-sidebar-nav-toggle").not(self).removeClass("advanced-sidebar-nav-toggle-open");
              }
            );

            jQuery(self).toggleClass("advanced-sidebar-nav-toggle-open");

            if(jQuery(self).hasClass("advanced-sidebar-nav-toggle-open")) {
                jQuery(self)
                      .parent("a")
                      .addClass("advanced-sidebar-nav-menu-open")
                      .siblings("ul")
                      .slideDown(300);

                  } else {
                    jQuery(self)
                      .parent("a")
          ...