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

Народ кто сталкивался с такой вот задачкой, ни как не получается её решить.
Задача состоит в том что бы на странице отображались категории, (Заголовок/под ним изображение) в ряду 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>';
?>