jquery - Dropdown Subcategories in WooCommerce -

by default woocommerce show categories , subcategories image posting.

is possible hide subcategory test , show test sub category when click main category furniture?

here html code page , css have used:

aside#woocommerce_product_categories-2 ul li:nth-child(4) ul {      display: none;   }        aside#woocommerce_product_categories-2 ul li:nth-child(4):hover > ul {      display:block  }

<aside id="woocommerce_product_categories-3" class="widget woocommerce widget_product_categories">       <h5 class="widgettitle">product categories</h5>       <ul class="product-categories">            <li class="cat-item cat-item-28"><a href="http://saltandpepper.workshopcy.com/product-category/accessories/">accessories</a></li>            <li class="cat-item cat-item-29"><a href="http://saltandpepper.workshopcy.com/product-category/clothes/">clothes</a></li>            <li class="cat-item cat-item-30"><a href="http://saltandpepper.workshopcy.com/product-category/flowers/">flowers</a></li>            <li class="cat-item cat-item-38 cat-parent current-cat-parent"><a href="http://saltandpepper.workshopcy.com/product-category/furniture/">furniture</a>                 <ul class="children">                      <li class="cat-item cat-item-41 current-cat"><a href="http://saltandpepper.workshopcy.com/product-category/furniture/test/">test</a></li>                 </ul>            </li>            <li class="cat-item cat-item-31"><a href="http://saltandpepper.workshopcy.com/product-category/home-furnishings/">home furnishings</a></li>            <li class="cat-item cat-item-32"><a href="http://saltandpepper.workshopcy.com/product-category/souvenirs/">souvenirs</a></li>       </ul>  </aside>

it works not sure if viable option if have many categories , subcategories , products...

thank help.

---- (update - 3) ----

i have chose jquery , css job (so need register (enqueu) js file in theme).

var $ = jquery.noconflict();  $(document).ready(function(){    /* each category */    $('ul.product-categories > li.cat-parent').each( function( index, element ){      /* each category if there subcategory */      $(this).mouseover(function() {        /* adding class 'ok' on rollover mouse event */         $(this).find('ul.children').addclass('ok');      }).mouseout(function() {        /* removing class 'ok' on rollout mouse event */         $(this).find('ul.children').removeclass('ok');      });    });  });

ul.product-categories > li.cat-parent > ul.children {      display: none;   }  ul.product-categories > li.cat-parent > ul.children.ok {      display:block; /* (or) display:inline-block; */  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <aside id="woocommerce_product_categories-3" class="widget woocommerce widget_product_categories">       <h5 class="widgettitle">product categories</h5>       <ul class="product-categories">            <li class="cat-item cat-item-28"><a href="http://saltandpepper.workshopcy.com/product-category/accessories/">accessories</a></li>            <li class="cat-item cat-item-29"><a href="http://saltandpepper.workshopcy.com/product-category/clothes/">clothes</a></li>            <li class="cat-item cat-item-30"><a href="http://saltandpepper.workshopcy.com/product-category/flowers/">flowers</a></li>            <li class="cat-item cat-item-38 cat-parent current-cat-parent"><a href="http://saltandpepper.workshopcy.com/product-category/furniture/">furniture</a>                 <ul class="children">                      <li class="cat-item cat-item-41 current-cat"><a href="http://saltandpepper.workshopcy.com/product-category/furniture/test/">test</a></li>                 </ul>            </li>            <li class="cat-item cat-item-58 cat-parent current-cat-parent"><a href="http://saltandpepper.workshopcy.com/product-category/furniture/">furniture2</a>                 <ul class="children">                      <li class="cat-item cat-item-61 current-cat"><a href="http://saltandpepper.workshopcy.com/product-category/furniture/test/">test2</a></li>                 </ul>            </li>            <li class="cat-item cat-item-31"><a href="http://saltandpepper.workshopcy.com/product-category/home-furnishings/">home furnishings</a></li>            <li class="cat-item cat-item-32"><a href="http://saltandpepper.workshopcy.com/product-category/souvenirs/">souvenirs</a></li>       </ul>  </aside>

i have add category item (that have subcategory) sure script works multiple items… script work categories have subcategories.

after possible animate, fading transitions, , many more things…

---- (update 2) ----

registering script in functions.php file of active child theme.

if dont have function.php file in child theme, copy parent theme. open file on editor , delete every code on (except first opening php tag , if there close php tag keep too.
in between paste function:

// registering javascript file in wordpress hook function registering_my_script_method() {     if ( !is_admin() ) {         wp_enqueue_script( 'jquery' );         wp_enqueue_script( 'my-custom-scripts', get_stylesheet_directory_uri() . '/js/script.js', array('jquery'), null, true );     } } add_action('wp_enqueue_scripts', 'registering_my_script_method'); 

in active child theme folder create js , inside create empty file called script.js. open script.js file , paste it, query code. that'all.