Skip to content

Instantly share code, notes, and snippets.

@erikyo
Last active February 14, 2022 08:45
Show Gist options
  • Save erikyo/571a121d91dc202a084ad4c466b15761 to your computer and use it in GitHub Desktop.
Save erikyo/571a121d91dc202a084ad4c466b15761 to your computer and use it in GitHub Desktop.
WooCommerce sidebar product categories widget animated accordion
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
}
<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>
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();
}
});
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment