WooCommerce | Expand and collapse child categories with custom toggle in the sidebar widget | https://i.gyazo.com/e1a39ed551096444134324bb429722bb.mp4

woocommerce-category-toggle.css

/* - woo cat toggling elements, injected via jQuery - */

/* make list item be relative, to be able to position toggle within this item, if desired */
#sidebar .widget_product_categories ul.product-categories > li.cat-parent {
	position: relative;	
}
/* the new toggle element wrapper, which is added via jQuery */
#sidebar .widget_product_categories ul.product-categories > li.cat-parent .woo-cat-toggle {
	cursor: pointer;
	display: inline-block;
	text-align: center;
	margin-left: 0.5em;
	width: 1.5em;
	line-height: 1em;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	transition: all 0.4s ease;
	width: 20px;
	height: 20px;
	background: rgba(0,0,0,0.05);
	text-align: center;
	line-height: 20px;
	border-radius: 50%;
}
/* when it's popped, style the toggle wrapper differently */
#sidebar .widget_product_categories ul.product-categories > li.cat-parent .woo-cat-toggle.cat-popped {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	background: rgba(0,24,113,1);
	color: white;
}
/* toggle icon */
#sidebar .widget_product_categories ul.product-categories > li.cat-parent .woo-cat-toggle::before {
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	text-transform: none;
	speak: none;
	content: '+';
	line-height: 20px;
	width: 20px;
	height: 20px;
	text-align: center;
}
/* toggle icon when triggered */
#sidebar .widget_product_categories ul.product-categories > li.cat-parent .woo-cat-toggle.cat-popped::before {
	content: '\2013';
}
/* hide sub cats by default */
#sidebar .widget_product_categories ul.product-categories > li.cat-parent .woo-cat-toggle ~ ul.children {
	overflow: hidden;
	max-height: 0;
	transition: all 0.4s ease;
}
/* show sub cats when triggered via jQuery toggle */
#sidebar .widget_product_categories ul.product-categories > li.cat-parent .woo-cat-toggle.cat-popped ~ ul.children {
	max-height: 300px;
}

woocommerce-category-toggle.js

jQuery(function($){
	// add a new toggle element after the parent category anchor
	$( "<div class='woo-cat-toggle'></div>" ).insertAfter( "#sidebar .widget_product_categories .product-categories > .cat-item.cat-parent > a" );
	// when the new toggle element is clicked, add/remove the class that controls visibility of children
	$( "#sidebar .widget_product_categories .product-categories .woo-cat-toggle" ).click(function () {
		$(this).toggleClass("cat-popped");
	});
	// if the parent category is the current category or a parent of an active child, then show the children categories too
	$('#sidebar .widget_product_categories .product-categories > .cat-item.cat-parent').each(function(){
		if($(this).is('.current-cat, .current-cat-parent')) {
			$(this).children('.woo-cat-toggle').toggleClass("cat-popped");
		} 
	});
});

So amazing codes! Worked like a charm!!!

Just one question, can anyone tell how to put the toggle icon on the left side, i mean, before the "category name"?

What do you mean? It should appear on the left by default. I had to change the CSS to position it to the right instead

well, just realized i could simply replace that After with Before, as simple as that. Thanks all guys!!!

FYI, here is a version for use with a widget that uses the block method. You'll need to update the block ID to your proper ID:

jQuery(function($){
	// add a new toggle element after the category count
	$( "<div class='woo-cat-toggle'></div>" ).insertAfter( "#block-12 .wp-block-woocommerce-product-categories .wc-block-product-categories-list > .wc-block-product-categories-list-item > .wc-block-product-categories-list-item-count" );
	// when the new toggle element is clicked, add/remove the class that controls visibility of children
	$( "#block-12 .wp-block-woocommerce-product-categories .wc-block-product-categories-list .woo-cat-toggle" ).click(function () {
		$(this).toggleClass("cat-popped");
	});
	// check each of the list items (each li)
	$('#block-12 .wp-block-woocommerce-product-categories .wc-block-product-categories-list > .wc-block-product-categories-list-item').each(function(){
		// see if the list item DOES have a ul child in it with a class used for category wrapper, meaning this list DOES seem to have any subcategories
		if($(this).find('ul.wc-block-product-categories-list').length !== 0) {
			// if it did have a ul with that class, then we add a class to the list item to let us know it does have children
			$(this).addClass("cat-children-yes");
		}
		else {
			// otherwise it did not find a ul child with that class, so it seems to not have any child categories, so we add a class to let us know
			$(this).addClass("cat-children-no");
			// we also then find and remove the toggle div we added earlier
			$(this).find('.woo-cat-toggle').remove();
		}
	});
	// if the parent category is the current category or a parent of an active child, then show the children categories too
	$('#block-12 .wp-block-woocommerce-product-categories .wc-block-product-categories-list > .wc-block-product-categories-list-item').each(function(){
		// FYI this doesn't work for block sidebar, since it doesn't have proper classes to know if it's the current category or not, so this won't actually auto pop them as coded
		if($(this).is('.current-cat, .current-cat-parent')) {
			$(this).children('.woo-cat-toggle').toggleClass("cat-popped");
		} 
	});
});

Hello @PythonMillionaire,

I'm trying to find where in the jsfiddle those categories disappear. I can't find it. Could you please explain more thoroughly?
I think I'm missing an error here that is right in front of me.

Thank you for this great solution :)