Expandable (v2) Product Categories for WooCommerce (Collapsed)

JS (jQuery) script to make the product categories sidebar widget of a theme collapsable, regardless of which theme it belongs. Using just css and js. You are not allowed to add html classes or elements. The html was taken randomly off of an eshop that uses the babyStreet Theme by theAlThemist. Just picked that one randomly. Code should work on every widget produced with the stock woocommerce. This version uses a different animation and the list starts collapsed

by escozul

HTML

<div class="listControl"><a id="listToggle">Collapse All</a></div>
<div id="woocommerce_product_categories-2" class="widget box woocommerce widget_product_categories">
  <ul class="product-categories">
    <li class="cat-item cat-item-49 cat-parent"><a href="https://www.paramythi.com.gr/product-category/boys-clothing/">BOYS</a> <span class="count">381</span>
      <ul class="children">
        <li class="cat-item cat-item-51 cat-parent"><a href="https://www.paramythi.com.gr/product-category/boys-clothing/baby/">ΒΡΕΦΙΚΟ</a> <span class="count">164</span>
          <ul class="children">
            <li class="cat-item cat-item-262"><a href="https://www.paramythi.com.gr/product-category/boys-clothing/baby/%ce%b1%ce%be%ce%b5%cf%83%ce%bf%cf%85%ce%ac%cf%81/">Αξεσουάρ</a> <span class="count">2</span></li>
            <li class="cat-item cat-item-231"><a href="https://www.paramythi.com.gr/product-category/boys-clothing/baby/%ce%b2%ce%b5%cf%81%ce%bc%ce%bf%cf%8d%ce%b4%ce%b5%cf%82-baby/">Βερμούδες</a> <span class="count">9</span></li>
            <li class="cat-item cat-item-299"><a href="https://www.paramythi.com.gr/product-category/boys-clothing/baby/%ce%b3%ce%b9%ce%bb%ce%ad%ce%ba%ce%bf/">Γιλέκο</a> <span class="count">1</span></li>
            <li class="cat-item cat-item-230"><a href="https://www.paramythi.com.gr/product-category/boys-clothing/baby/%ce%b6%ce%b1%ce%ba%ce%ad%cf%84%ce%b5%cf%82-baby/">Ζακέτες</a> <span class="count">8</span></li>
            <li class="cat-item cat-item-233"><a href="https://www.paramythi.com.gr/product-category/boys-clothing/baby/%ce%bc%ce%b1%ce%b3%ce%b9%cf%8c-baby/">Μαγιό</a> <span class="count">1</span></li>
            <li class="cat-item cat-item-202"><a href="https://www.paramythi.com.gr/product-category/boys-clothing/baby/%ce%bc%cf%80%ce%bb%ce%bf%cf%85%ce%b6%ce%ac%ce%ba%ce%b9%ce%b1-baby/">Μπλουζάκια</a> <span class="count">34</span></li>
            <li class="cat-item cat-item-207"><a...

CSS

#listContainer{
      margin:15px 0px;
    }

    #expList {
        padding-left: 10px;
    }
     
    #expList ul, li {
        list-style: none;
        margin:0;
        padding:0;
        cursor: pointer;    
    }
    #expList p {
        margin:0;
        display:block;
    }
    #expList p:hover {
        background-color:#121212;
    }
    #expList li {
        line-height:140%;
        text-indent:0px;
        background-position: 1px 5px;
        padding-left: 20px;
        background-repeat: no-repeat;
        margin-bottom: 5px;
    }
    #expList ul{
        margin-top: 5px;
    }

     
    /* Collapsed state for list element */
    .widget_product_categories ul li.cat-parent.collapsed > a:before {
      content: "+"
    }
    /* Expanded state for list element
    /* NOTE: This class must be located UNDER the collapsed one */
    .widget_product_categories ul li.cat-parent.expanded > a:before {
      content: "-"
    }
    .active{
        background-color: yellow;
    }

    #expList span:hover{
    color:red;
}

/*List Controls*/
.button, .listControl{
  margin-top: 15px;
}
.button, .listControl a {
    border: 1px solid #555555;
    color: #555555;
    cursor: pointer;
    height: 1.5em;
    line-height: 1.5em;
    margin-right: 5px;
    padding: 4px 10px;
    text-decoration: none !important;
}
.button:hover, .listControl a:hover {
    background-color:#555555;
    color:#FFFFFF; 
    font-weight:normal;
}
.siteTitle:hover, .siteActive{
    color:red;
}
.siteTitle:active{
    font-weight: bold;
}

JavaScript

function prepareList() {
  $('.product-categories').find('li:has(ul)').click( function(event) {
      if (this == event.target) {
        $(this).toggleClass('expanded');
        $(this).children('ul').toggle('medium');
      }
      return false;
    })
    .addClass('collapsed').children('ul').hide();

        //Create the toggle 
        var toggle = false;
    $('#listToggle').unbind('click').click(function(ev){
        if(toggle == false){
          $('li.collapsed').addClass('expanded');
          $('li li.collapsed').parent().show('medium');
          $('#listToggle').text("Collapse All");
          toggle = true;
        }else{
          $('li.collapsed').removeClass('expanded');
          $('li li.collapsed').parent().hide('medium');
          $('#listToggle').text("Expand All");
          toggle = false;          
        }
      });

  $('.product-categories').find('li').click( function(event) {
    siteUrl =  $(this).attr('value');
      
              return false;
    });
}

prepareList();