How to make Woocommerce "Product Categories" menu like this?

Question

User navigation

How to make Woocommerce "Product Categories" menu like on this site mir-econom-sveta.com/? Is there some kind of plugin used for this, or is it possible to make some changes to the code of the standard Woocommerce "Product Categories" widget menu code?
I have a Storefront theme (Wordpress + Woocommerce).

Answer 1

This is the functionality of the theme. It uses some kind of JS plugin like this jordnkr.github.io/collapsible

Answer 2

This is a standard product category widget, modified via js, plus the styles
of the script are as follows:

// Woocommerce Widget Toggle
(function(theme, $) {

    theme = theme || {};

    var instanceName = '__wooWidgetToggle';

    var WooWidgetToggle = function($el, opts) {
        return this.initialize($el, opts);
    };

    WooWidgetToggle.defaults = {

    };

    WooWidgetToggle.prototype = {
        initialize: function($el, opts) {
            if ($el.data(instanceName)) {
                return this;
            }

            this.$el = $el;

            this
                .setData()
                .setOptions(opts)
                .build();

            return this;
        },

        setData: function() {
            this.$el.data(instanceName, this);

            return this;
        },

        setOptions: function(opts) {
            this.options = $.extend(true, {}, WooWidgetToggle.defaults, opts, {
                wrapper: this.$el
            });

            return this;
        },

        build: function() {
            var self = this,
                $el = this.options.wrapper;

            $el.parent().removeClass('closed');
            if (!$el.find('.toggle').length) {
                $el.append('<span class="toggle"></span>');
            }
            $el.find('.toggle').click(function() {
                if ($el.next().is(":visible")){
                    $el.parent().addClass('closed');
                } else {
                    $el.parent().removeClass('closed');
                }
                $el.next().stop().slideToggle(200);
                theme.refreshVCContent();
            });

            return this;
        }
    };

    // expose to scope
    $.extend(theme, {
        WooWidgetToggle: WooWidgetToggle
    });

    // jquery plugin
    $.fn.themeWooWidgetToggle = function(opts) {
        return this.map(function() {
            var $this = $(this);

            if ($this.data(instanceName)) {
                return $this.data(instanceName);
            } else {
                return new theme.WooWidgetToggle($this, opts);
            }

        });
    }

}).apply(this, [window.theme, jQuery]);