Как сделать выпадающие разделы товаров при клике на категорию?

Народ кто сталкивался с такой вот задачкой, ни как не получается её решить.
Задача состоит в том что бы на странице отображались категории, (Заголовок/под ним изображение) в ряду 3 категории, 3 колонки, сам вывод осуществляется через foreach категорий и foreach субкатегорий, функция работате отлично всё выводит, необходимо сделать так что бы при клике на категорию внизу появлялся блок с субкатегориями, на данный момент всё расползается

<?php
  $args = array(
        'taxonomy'   => 'product_cat',
        'hide_empty' => false,
        'parent'   => 0,
      );
      $product_categories = get_terms( $args );
      $count = count($product_categories);
    echo '<div id="new-vid-category">';
      if ( $count > 0 ){
        foreach ( $product_categories as $product_category ) {
            $thumbnail_id = get_woocommerce_term_meta( $product_category->term_id, 'thumbnail_id', true );
      echo '<article class="new-vid-catalog">';
      echo '<div class="new-vid_title">';
      echo  '<a href="' . get_term_link( $product_category ) . '" title=""><h2>' . $product_category->name . '</h2></a>';
      echo  '</div>';
      echo  '<div class="btn">';
            echo  '<i><img src="'.  wp_get_attachment_url( $thumbnail_id ) .'" style="border:0;"/></i>';
            echo  '</div>';
        echo '<div class="new-vid-razdel">';
          echo  '<ul class="new-parent-title__overlay">';
      $args = array(
                'taxonomy'   => 'product_cat',
                'hide_empty' => false,
                'parent'   => $product_category->term_id,
              );
              $product_categories = get_terms( $args );
              $count = count($product_categories);
              if ( $count > 0 ){
                foreach ( $product_categories as $product_category ) {
                  $thumbnail_id = get_woocommerce_term_meta( $product_category->term_id, 'thumbnail_id', true );
                 echo '<li class="new-parent-desc">';
                  echo '<i><img src="'.  wp_get_attachment_url( $thumbnail_id ) .'" style="width: 100px; height: 100px; border:0;"/></i>';
                 echo  '<a href="' . get_term_link( $product_category ) . '" title=""><h4>' . $product_category->name . '</h4></a>'; 
                 echo  '</li>';
        }}
      echo  '</ul>';
    echo  '</div>';
      echo  '</article>';
        }
      }
      
    echo  '</div>';
?>

=) верно

Замысел таков, есть Родительские категории товаров их 9,

При клике на категорию должен выезжать снизу блок/лента с подкатегориями 100х100 img + заголовок

аналог, но здесь идёт очень много целая запись, а мне нужно только подкатегории товаров, уже пробовал вариантов с 30 но у меня родительские категории разъезжаются

с js на вы=)

display: none поставил что бы отцентровать категории,
position: absolute я не пробовал, щас попробую

обновил конструкцию стилей, щас думаю как доделать уже до конца

ни как не получается закончить, народ может сможете дать ссылку на пример, или подсказать где ошибка и в чём, блоки расползаются, да и js открывает только первую категорию

Народ, Help me!

, скрипт js написал, сверстал как надо, ни как не догоню две вещи:
1) Как всё таки делать разрыв между строк (надо сделать 3 колонки в 3 ряда);
2) Как сделать так, что бы при клике на другую категорию, сначала js сворачивался, а новый после открывался. (на данный момент при клике открывается и закрывается)
Почти на финишной прямой, везде уже писал, на разных форумах, ответа не получил.

хз такого не нашёл

Wasp сказал(а)
Аккордеон есть для wp в

Вы не можете просматривать опубликованные ссылки

Если по каким то параметрам не подойдет, есть еще более сложный вариант.

ссылка не правильная

Да сам плагин не нужен, и знаю его, ответ подсказал земляк с habrа, щас оптимизирую код, добавлю стили, и выложу вам

Огромное спасибо автору

вот его решение

можно его доделать либо под woocommrce, либо под вывод товаров wp recall. Тема закрыта