Skip to content

Instantly share code, notes, and snippets.

@neilgee neilgee/pc-menu.js
Last active Feb 4, 2019

Embed
What would you like to do?
WooCommerce Accordion Style Expand/Collapse Product Category Menu
jQuery(document).ready(function($) {
/**
* WooCommerce Product Category Accordion jQuery Menu
* @link https://wpbeaches.com/woocommerce-accordion-style-expand-collapse-product-category-menu/
*/
if ($('ul.product-categories').length > 0) {
// Set variables
// pC = Parent Category
// fpC = First Parent Category
// cC = Current Category
// cCp = Currents Category's Parent
var
pC = $('.product-categories li.cat-parent'),
fpC = $('.product-categories li.cat-parent:first-child'), // Start this one open
cC = $('.product-categories li.current-cat'),
cCp = $('.product-categories li.current-cat-parent');
pC.prepend('<span class="toggle"><i class="far fa-minus-square fa-plus-square"></i></span>');
pC.parent('ul').addClass('has-toggle'); pC.children('ul').hide();
if (pC.hasClass("current-cat-parent")) {
cCp.addClass('open'); cCp.children('ul').show(); cCp.children().children('i.far').removeClass('fa-plus-square');
}
else if (pC.hasClass("current-cat")) {
cC.addClass('open'); cC.children('ul').show(); cC.children().children('i.far').removeClass('fa-plus-square');
}
else {
fpC.addClass('open'); fpC.children('ul').show(); fpC.children().children('i.far').removeClass('fa-plus-square');
}
$('.has-toggle span.toggle').on('click', function() {
$t = $(this);
if ($t.parent().hasClass("open")){
$t.parent().removeClass('open'); $t.parent().children('ul').slideUp(); $t.children('i.far').addClass('fa-plus-square');
}
else {
$t.parent().parent().find('ul.children').slideUp();
$t.parent().parent().find('li.cat-parent').removeClass('open');
$t.parent().parent().find('li.cat-parent').children().children('i.far').addClass('fa-plus-square');
$t.parent().addClass('open');
$t.parent().children('ul').slideDown();
$t.children('i.far').removeClass('fa-plus-square');
}
});
// Link the count number
$('.count').css('cursor', 'pointer');
$('.count').on('click', function(event) {
$(this).prev('a')[0].click();
});
}
});
@deeman

This comment has been minimized.

Copy link

deeman commented Feb 4, 2019

Works perfect, may I just ask you; -How to keep it all closed by default? —Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.