Adding class to current child when click on parent element

i have ecommerce site, trying open sub-menu when click on parent menu
In category side-bar when parent element (main category) is clicked i want add class to child element (sub-category) so that child element is display with some nice animation.
categories menu

when next main category is click previous sub-category should be hidden and current sub-category should be displayed.

<ul class="woo-main-cat">

<li class="cork"><a href="http://maincategories">Anti-Allergics</a>
	<ul class="sub-cat-menu">
	  <li><a href="http://maincategoreis/sub-categories)</a></li>
	</ul>
</li>

<li class="cork"><a href="http://maincategories">Anti-Allergics</a>
	<ul class="sub-cat-menu">
	  <li><a href="http://maincategoreis/sub-categories)</a></li>
	  <li><a href="http://maincategoreis/sub-categories)</a></li>
	</ul>
</li>

<li class="cork"><a href="http://maincategories">Anti-Allergics</a>
	<ul class="sub-cat-menu">
	  <li><a href="http://maincategoreis/sub-categories)</a></li>
	  <li><a href="http://maincategoreis/sub-categories)</a></li>
	</ul>
</li>

<ul>

Where class:woo-main-cat > li holds main categories and class:sub-cat-menu > li holds sub-categories. When woo-main-cat > li is click sub-cat-menu should displayed when next main categories is clicked previous sub-category should be close.

.sub-cat-menu {


background: #fff;
  visibility: hidden;
  height: 0;
  transition: 0.8s ease-in;
}

.tako-open{
  visibility: visible;
  height: 100%;
}

Trying some animation effect with css when sub-categories opens and hide

$('.woo-main-cat li').on('click', function(){
$(this).children('.sub-cat-menu').addClass('tako-open');
});

Above code perfectly open the current sub-category adding tako-open class on child element->sub-cat-menu when click on parent category but i want close this open sub-category when next parent category is click.

jQuery(function($) {
$('.woo-main-cat li').on('click', function(){
    $(this).children('.sub-cat-menu').addClass('tako-open');
},function() {
       $(this).children('.sub-cat-menu').removeClass('tako-open');
    });
});

so after adding removeClass code nothing happens it doesnt add any class to child-element (sub-category) when click on parent element (main-category)

You can first remove the tako-open class from all the elements before opening the current one.

$('.woo-main-cat > li').on('click', function(){
  $('.sub-cat-menu').removeClass('tako-open');
  $(this).children('.sub-cat-menu').addClass('tako-open');
});

$('.woo-main-cat li').on('click', function(){
$( "*" ).removeClass( "tako-open" );
$(this).children('.sub-cat-menu').addClass('tako-open',1000, "easeOutBounce");
    })

• will remove all tako-open classes. ppreciate everyone's help