WooCommerce sidebar product categories widget animated accordion

woo_product_accordion.css

ul.product-categories ul {
  margin: 0;
  padding-left: 32px
}

ul.product-categories li {
  line-height: 42px;
  margin: 0
}

ul.product-categories a {
  color: #5c6069;
  font-weight: 500
}

ul.product-categories .current-cat-parent>a,ul.product-categories .current-cat>a {
  font-weight: 600
}

ul.product-categories .current-cat>a {
  color: #7452b1
}

ul.product-categories .toggle i {
  opacity: .5;
  transition: .35s;
  vertical-align: middle;
  margin-top: -2px;
  margin-right: 8px
}

ul.product-categories .cat-parent.active>a i {
  opacity: 1;
  transform: rotate(90deg);
  color: #7452b1
}

woo_product_accordion.html

<ul class="product-categories">
  <li class="cat-item cat-item-21 cat-parent">
    <a href="/product-category/clothing/">Clothing</a>
    <ul class="children" style="display: none;">
      <li class="cat-item cat-item-24"><a href="/product-category/clothing/accessories/">Accessories</a></li>
      <li class="cat-item cat-item-23"><a href="/product-category/clothing/hoodies/">Hoodies</a></li>
      <li class="cat-item cat-item-22"><a href="/product-category/clothing/tshirts/">Tshirts</a></li>
    </ul>
  </li>
  <li class="cat-item cat-item-26"><a href="/product-category/decor/">Decor</a></li>
  <li class="cat-item cat-item-25"><a href="/product-category/music/">Music</a></li>
</ul>

woo_product_accordion.js

jQuery(document).ready(function($) {

  if ($('ul.product-categories').length > 0) {

    $('.product-categories li.cat-parent > a').prepend('<span class="toggle"><i>&gt;</i></span>');
    $('.product-categories .children').hide();
    $('.product-categories li.current-cat-parent > .children, .product-categories li.current-cat > .children').show();
    $('.product-categories li.current-cat, .product-categories li.current-cat-parent').addClass('active');

    $(function () {

      $('.product-categories').find('a').on('click', function (e) {

        var catItem = $(this).parent('.cat-item');

        if ( ! catItem.hasClass('active')) {

          catItem.addClass('active');

          if ( catItem.hasClass('cat-parent') || catItem.hasClass('current-cat')) {
            e.preventDefault();
          }

          $(this).parents('li.cat-parent').siblings().removeClass('active');

          $(this).siblings('.children').stop(true, true).slideToggle()
            .parents('.cat-item').siblings().children('.children').stop(true, true).slideUp();

        }

      });

    });

  }

});