WordPressのカスタムタクソノミーをアコーディオン表示にしたい

前提・実現したいこと

WordPressにて、カスタムタクソノミーの一覧ページを作成しております。
親カテゴリ、子カテゴリ、その下の3階層までありますが、普通に一覧表示にしても見にくいので改善したく質問させていただきました。

発生している問題・エラーメッセージ

現状、一覧は固定ページに表示しており、
テンプレートを「カテゴリ一覧」として作成しております。内容は下記の通りです。
下記の場合、一覧として表示されているだけで、アコーディオンのようにはなりません（当然）

PHP
1<?php
2/*
3Template Name: カテゴリ一覧
4*/
5get_header(); ?>
6<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>
7<main>
8
9
10<?php
11 $my_tax = 'products_category';
12 $terms = get_terms( $my_tax, array('hide_empty' => false) );    
13 echo walk_category_tree( $terms, 0 , array(
14     'style' => 'list',
15 ));
16?>
17
18
19<style>
20  .children{
21    text-decoration:none;
22    list-style:none;
23  }
24  </style>
25
26</main>
27
28<?php get_footer(); ?>

試したこと

改善案として、Google先生に頼ってjQueryで処理するのがいいそうですが、
当方jQueryの知識がなく、苦戦しております。
試したのは以下のパターンです。

jQuery
1<script>
2  $(function () {
3  // 親メニュー処理
4  $('span').click(function() {
5    // メニュー表示/非表示
6    $(this).next('ul').slideToggle('fast');
7  });
8
9  // 子メニュー処理
10  $('li').click(function(e) {
11    // メニュー表示/非表示
12    $(this).children('ul').slideToggle('fast');
13    e.stopPropagation();
14  });
15});
16  </script>