Bigcommerce - Как сделать так, чтобы боковые подкатегории отображались только при нажатии на родительскую категорию?

Вчера я буквально часами пытался это сделать и нашел здесь один отличный ответ: stackoverflow.com/questions/11056808/big-commerce-hover-menu, но я не могу понять, как применить его к моему магазину. По сути, Bigcommerce использует фрагмент кода, называемый «панелью», для отображения категорий. Эта панель используется как в верхнем меню категорий, так и в боковом меню. Прямо сейчас BC расширяет все категории следующим образом:

родительская категория

Детская категория

Следующий ребенок

Следующий ребенок

Детская категория

Следующий ребенок

Следующий ребенок

Я хотел бы знать, как сохранить верхнее меню таким же, но как изменить боковое меню, чтобы оно отображалось следующим образом:

родительская категория

Детская категория

Детская категория

И по клику:

родительская категория

Детская категория

Следующий ребенок

Следующий ребенок

Детская категория

родительская категория

Детская категория

Детская категория

Следующий ребенок

Следующий ребенок

Соответственно.

HTML-код бокового меню категорий выглядит следующим образом:

<div class="CategoryList" id="SideCategoryList">
<div class="BlockContent">
    <div class="SideCategoryListFlyout">
        <ul class="sf-menu sf-horizontal sf-js-enabled">
            <li class=""><a href="#" class="sf-with-ul">Parent Category</a>
               <ul style="display: none; visibility: hidden;">
                  <li><a href="#">Child Category</a>
                      <ul style="display: none; visibility: hidden;">
                         <li><a href="#">Next Child</a></li>
                         <li><a href="#">Next Child</a></li>
                         <li><a href="#">Next Child</a></li>
                      </ul>
                  </li>
                  <li><a href="#">Child Category</a>
                      <ul style="display: none; visibility: hidden;">
                         <li><a href="#">Next Child</a></li>
                         <li><a href="#">Next Child</a></li>
                         <li><a href="#">Next Child</a></li>
                      </ul>
                  </li>
               </ul>
            </li>
        </ul>
    </div>
</div>
</div>

Со следующими стилями CSS:

.Left #SideCategoryList {
    display: block;
}
.Left #SideCategoryList ul ul {
    color: #5a5353;
}
.Left #SideCategoryList .BlockContent,
.Left .slist .BlockContent {
    color: #5a5353;
}
.Left #SideCategoryList li a,
.Left .slist li a,
.Left .afterSideShopByBrand a, .Left #GiftCertificatesMenu li a, .Left #SideAccountMenu li a {
    color: #5a5353;
}
.Left #SideCategoryList li a:hover,
.Left .slist li a:hover,
.Left .afterSideShopByBrand a:hover, .Left #GiftCertificatesMenu li a:hover, .Left #SideAccountMenu li a:hover {
    color: #5a5353;
}
.Left #SideCategoryList li li a,
.Left .slist li li a {
color: #5A5353;

}
.Left #SideCategoryList li li a:hover,
.Left .slist li li a:hover {
    color: #aca9a9;
}

Надеюсь, я все рассказал, но если вам нужны дополнительные разъяснения, пожалуйста, дайте мне знать. Имейте в виду, что некоторый код генерируется системой автоматически (я подозреваю, что jquery, поскольку при использовании инструмента проверки наведение курсора на ссылку автоматически меняет ее класс). Вот ссылка на сайт:

http://bit.ly/1aHKTke