Adding class to current child when click on parent element

[esu]

i have ecommerce site, trying open sub-menu when click on parent menu

1. 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.
   
   

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>
	

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)

2.When sub-category is shown and user click on menu for products, page is reload to display its particular products but when page is reload sub-category menu is close, i want to keep sub-category menu open even when page reload.

Show when user click on Gastrointestinal (main category menu) > aciphex-rabeprazole (sub-category menu) is shown and when user click on aciphex-rabeprazole page reload to display its products but on page reload sub-category menu is closed, how can i keep it open current sub-category menu even after page reload.

I tried with JavaScript local storage but didnt success

[m_hutley]

1. Remove the class from all sub-categories, and then add it to the ones you want to display.
2. You’d have to pass the selected menu category on the search bar, or else have something in the individual page or local storage that tells it what category menu should be open. Alternatively, you’d switch your entire site to being AJAX-loaded, which i dont think is what you’re going for.

You dont show us what you’ve tried for #2, so i cant suggest why it doesnt work.

[esu]

@esu

tako-open

1. there are no calss on sub-categories (sub-cat-menu is to style and hidden sub-categories) class:tako-open is only added on sub-categories when click on main-categories as by default sub-categories are hidden.
2. could figure out much as im newbie to javascript. im stilling doing search

[m_hutley]

@esu

there are no calss on sub-categories (sub-cat-menu is to style and hidden sub-categories) class:tako-open is only added on sub-categories when click on main-categories as by default sub-categories are hidden.

That doesnt matter. You can tell javascript to remove a class that doesnt exist, and it just shrugs and says it has nothing to do.

So. Consider your situation:
You have a class (tako-open) applied to some sub-cats. You have more subcats than that, but they dont have the class.
You tell javascript to remove the class from ALL subcats. End result: Any subcat that had the class, no longer has it, and will close.
Then you tell javascript to apply the class to the subcats that should now have it. End result: Any subcat that should have the class, now does. And will open.

Hidden: Animation of these lines is asynchronous; so any subcat that had the class, and should STILL have the class, will have the class removed and re-added so quickly that they will not change visually.

[esu]

1st issue is solve working for 2nd issue

[m_hutley]

What have you tried for the second issue that hasnt worked? Show us some code, and we can help.

[synerdb]

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

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

        <li data-cat='dos-panic' class="cork"><a href="http://maincategories">dos-panic</a>
            <ul class="sub-cat-menu" >
            <li><a href="http://maincategoreis/sub-categories">456</a></li>
            <li><a href="http://maincategoreis/sub-categories">678</a></li>
            </ul>
        </li>

        <li data-cat='esyuop' class="cork"><a href="http://maincategories">esyuop</a>
            <ul class="sub-cat-menu" >
            <li><a href="http://maincategoreis/sub-categories">908</a></li>
            <li><a href="http://maincategoreis/sub-categories">876</a></li>
            </ul>
        </li>
    </ul>

data-type added.

$(".woo-main-cat li").on("click", function(e){
      e.preventDefault();
      var currcat = $(this).data("cat");
      
      var wwe = localStorage.setItem("currentcat", currcat);
      $(".panel").hide();
      $(currcat).fadeIn();
    });

    var lastSelectedcat = localStorage.getItem("currentcat");
    if (lastSelectedcat === 'dos-panic' ) {
        $('.woo-main-cat li > .sub-cat-menu').addClass('tako-open');
    } 

try manually compare but its adding class:tako-open to all sub-categories, data is store in local storage and can be retrieve successfully but could compare and apply the class:tak-open to retrieve data

[m_hutley]

@synerdb

but its adding class:tako-open to all sub-categories

It’s doing exactly what you told it to do. So what you need to do is select the items you’re specifically interested in.

@synerdb

$('.woo-main-cat li > .sub-cat-menu').addClass('tako-open');

$('.woo-main-cat li[data-cat="dos-panic"] > .sub-cat-menu').addClass('tako-open');

Or when you want to inevitably make it work with every value of lastSelectedcat…

$('.woo-main-cat li[data-cat="'+lastSelectedcat+'"] > .sub-cat-menu').addClass('tako-open');

[synerdb]

work like charm, appericate your time and help