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");
		} 
	});
});

Thank you for this great solution :)