Frage Listenmenü ein-/ausklappbar machen

[Saikoro]

Hallo liebe Leute,

ich habe ein kleines Problem, bei dem ich leider nicht wirklich weiter komme und hoffe auf eure Hilfe.

Ich habe in Wordpress folgendes Menü in einer Sidebar:

Zu diesem Menü werden noch einige Kategorien mehr hinzukommen, sodass das Menü am Ende viel zu lang wäre. Nun möchte ich, dass nur die Hauptkategorien zu sehen sind bzw. diese "ausklappbar" sind. Dies ist gut in folgendem Screenshot zu sehen, so möchte ich es haben:

Nun habe ich natürlich auch schon fleißig gegooglet und bin immer wieder auf JavaScript Lösungen gestoßen, bei denen ich jedoch nicht weiß wie ich diese in das Template einbauen soll. Ich bin leider kein Webentwickler und kenne mich nur bedingt mit PHP aus. Der Code für meine Sidebar ist in dem Template folgendermaßen aufgebaut:

<?php
/**
* Plugin Name: Goodlayers Course Category
* Plugin URI: http://goodlayers.com/
* Description: A widget that list all course categories
* Version: 1.0
* Author: Goodlayers
* Author URI: http://www.goodlayers.com
*
*/

add_action( 'widgets_init', 'gdlr_course_category_widget' );
if( !function_exists('gdlr_course_category_widget') ){
    function gdlr_course_category_widget() {
        register_widget( 'Goodlayers_Course_Category' );
    }
}

if( !class_exists('Goodlayers_Course_Category') ){
    class Goodlayers_Course_Category extends WP_Widget{

        // Initialize the widget
        function __construct() {
            parent::__construct(
                'gdlr-course-category-widget',
                __('Goodlayers Course Category Widget','gdlr-lms'),
                array('description' => __('A widget that list course categories', 'gdlr-lms'))); 
        }

        // Output of the widget
        function widget( $args, $instance ) {
            global $theme_option;   
               
            $title = apply_filters( 'widget_title', $instance['title'] );
           
            // Opening of widget
            echo $args['before_widget'];
           
            // Open of title tag
            if( !empty($title) ){
                echo $args['before_title'] . $title . $args['after_title'];
            }
               
            // Widget Content
            $category_list = gdlr_lms_get_term_list('course_category');
           
            echo '<div class="gdlr-course-category-widget widget_categories">';
            echo '<ul>';   
            wp_list_categories(array('taxonomy'=>'course_category', 'title_li'=>''));
            echo '</ul>';
           
            // foreach($category_list as $cat_slug => $cat_name){
            //     if($cat_slug == '') continue;
            //
            //     echo '<li><a href="' . get_term_link($cat_slug, 'course_category') .  '" >';
            //     echo $cat_name;
            //     echo '</a></li>';
            // }
            echo '</div>';
               
            // Closing of widget
            echo $args['after_widget'];   
        }

        // Widget Form
        function form( $instance ) {
            $title = isset($instance['title'])? $instance['title']: '';
           
            ?>

            <!-- Text Input -->
            <p>
                <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title :', 'gdlr-lms'); ?></label>
                <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
            </p>       

        <?php
        }
       
        // Update the widget
        function update( $new_instance, $old_instance ) {
            $instance = array();
            $instance['title'] = (empty($new_instance['title']))? '': strip_tags($new_instance['title']);

            return $instance;
        }   
    }
}
?>

Ich hoffe ich habe mein Problem einigermaßen verständlich erläutert und hoffe auf eure Hilfe. Danke im Vorraus!

Viele Grüße
Saikoro