Как задать условия для видимости табов bootstrap 3, при размещении навигации табов в collapse меню?

[Drunk_Monkey]

Добрый день, реализовываю мега меню использую плагины Bootsrap: tabs и collapse

ссылка на прототип (codpen)

 

Нужная логика:

• При клике на родительскую категорию (Одежда, Техника, Для дома) открываются в сайдбаре, ее дочерние категории. — реализовано
• По клику на дочернюю категорию открывается, в правой колонке, содержимое связанного с дочерней категорией таба — реализовано
• Подкатегории (Мужская одежда, Женская …) первой родительской категории (Одежда) открыты по умолчанию — реализовано
• При клике на другую родительскую категорию, открываются ее дочерние и скрываются дочерние категории, предыдущей активной — реализовано
• При клике на родительскую категорию и открытии ее дочерних должен активироваться таб связанный с первой дочерней категорией — частично реализовано, срабатывает только один раз (при первом клике, на последующих, не срабатывет)
• При повторном клике на родительскую категорию с открытыми дочерними, дочерние скрываются + скрываться таб связанный с одной из ее дочерних категоий — не реализовано скрытие таба

 

Возникли сложности со скрытием табов (последний пункт списка с логикой) и активацией таба первой дочерней категории, при клике по родительской.

Код:

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

 

Открывает таб первой подкатегории только один раз. Если я на примере кликну по род. категории «Техника», то откроются ее дочерние категории (Смартфоны, Планшеты) и активируется так первой подкатегории (Смартфоны) скриншот, но если если я после этого, к примеру, кликну по другой род. категории «Одежда», а потом снова кликну по категории «Техника», таб связанный с первой дочерней «Смартфоны» не будет активен — скриншот.