In my developing, I recently decided to enable toggling for the WooCommerce Product Categories sidebar widget.
I’ve outlined the experience below for future WordPress developers’ use.
Solving An Issue
The original issue is that if you include the Product Categories widget, it will display all of the categories.
Sure you can limit it to “only show children of the current category.“ But what if you wanted to give the user quick/easy access to ALL categories (and sub categories), without having a huge list of links?
CSS + jQuery To The Rescue
You can view the code here:
- gist.github.com/Garconis/b750bee39aed5f0e8e596bb2fac16cab
- Comments have also been added to the code for ease of use.
The Result?
Using a combination of CSS and jQuery, you can force hide the sub categories, and then toggle them open and closed with the click of a toggle.
In addition, you can check to see if the page is a “current category” – and if so, it can automatically expand its sub-categories too.
- Video example:
https://i.gyazo.com/e1a39ed551096444134324bb429722bb.mp4
