How to set conditions for visibility of bootstrap 3 tabs when placing tab navigation in collapse menu?

Question

JavaScript

Good afternoon, I'm implementing a mega menu using Bootsrap plugins: tabs and collapse

prototype link (codpen)

Expected logic:

• When you click on the parent category (Clothes, Appliances, Home), its child categories open in the sidebar. — implemented
  
• By clicking on a child category, in the right column, the contents of the tab associated with the child category are opened - implemented
  
• Subcategories (Men's clothing, Women's...) of the first parent category (Clothing) are open by default - implemented
  
• When clicking on another parent category, its child categories are opened and child categories are hidden, the previous active one is implemented
  
• When clicking on the parent category and opening its children, the tab associated with the first child category should be activated - partially implemented, it works only once
  
• When you click again on a parent category with open children, the children are hidden + hide the tab associated with one of its child categories - hiding the tab is not implemented
  

There were difficulties with hiding tabs (the last item in the list with logic) and activating the tab of the first child category when clicking on the parent.

The code:

$('li.panel').click(function() {
    $(this).children().find('a:first').tab('show');

Opens the first subcategory tab only once. If I click on the genus in the example . category "Technology", then its child categories will open (Smartphones, Tablets) and the first subcategory (Smartphones) will be activated, but if after that, for example, I click on a different kind. category "Clothes", and then again click on the category "Technology", the tab associated with the first child "Smartphones" will not be active