Bigcommerce - How to make side subcategories only display when parent category is clicked on?

Question

I literally spent hours trying to do this, yesterday, and found one great answer here: stackoverflow.com/questions/11056808/big-commerce-hover-menu but I can't seem to figure out how to apply it to my store. Basically, Bigcommerce uses a snippet of code called a 'panel' to display categories. This panel is used in both the top category menu and the side menu. Right now, BC expands all categories as follows:

Parent Category

Child Category

Next Child

Next Child

Child Category

Next Child

Next Child

I'd like to know how to keep the top menu looking the same, but how to change the side menu to display as follows:

Parent Category

Child Category

Child Category

And on click:

Parent Category

Child Category

Next Child

Next Child

Child Category

Parent Category

Child Category

Child Category

Next Child

Next Child

Respectively.

The HTML for the side category menu looks like this:

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

With the following CSS styles:

.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;
}

I hope I covered everything, but if you need more clarification, please let me know. Keep in mind, some code is generated by the system automatically (I suspect jquery as when using the inspection tool, hovering over a link automatically changes it's class). Here is the site link:

http://bit.ly/1aHKTke

Answer 1

In Bigcommerce, the side navigation and top menu navigation are often called by the same ID selector.

For this javascript to work only in one area, you want to use a more specific selector such as #SidePanel > #SideCategoryList.

It looks like you may no longer be working on this site, but hope that helps someone.