Как сделать раскрывающееся меню категорий товаров Woocommerce в виджете сайдбара по клику

Итак как сделать раскрывающееся меню категорий товаров Woocommerce в виджете сайдбара по клику.

Чтобы было понятно, этот скрипт пишется для этого виджета:

Скрипт будет написан для такой структуры (все лишние теги и классы удалены для простоты восприятия), в вашем шаблоне могут быть другие классы:

<ul class="product-categories">
  <li><a>Для малышей</a></li>
  <li><a>Для мальчиков</a></li>
  <li><a>Для девочек</a></li>
  <li class="cat-parent"><a>Прочие игрушки</a>
    <ul class='children'>
      <li><a>Фигурки и персонажи</a></li>
      <li><a>Игры</a></li>
      <li><a>Конструкторы и головоломки</a></li>
      <li><a>Другие игрушки</a></li>
    </ul>
  </li>
  <li class="cat-parent"><a>Прочие товары</a>
    <ul class='children'>
    <li class="cat-item cat-item-19"><a>Мобили</a></li>
    </ul>
  </li>
</ul>

Вы можете исправить скрипт под свои классы и под свою структуру:

$('.product-categories .cat-parent').children('a').click(function() {
  $(this).siblings('.children').slideToggle();
  return false;
});

Для дочернего меню нужно задать display: none; в стилях:

ul.children{
  display: none;
}

В некоторых шаблонах есть специальное поле для добавления своих js-кодов
Например:

Или добавить его в свой файл скриптов, например custom.js:

$(function() {
  $('.product-categories .cat-parent').children('a').click(function() {
    $(this).siblings('.children').slideToggle();
    return false;
  });
});

Пример

See the Pen category menu woocommerce open on click by Denis (@deniscreative) on CodePen.0