How to create a collapsible category list in a BigCommerce store

By default, there are two different ways to display categories in the category list on the side of the homepage, that the BigCommerce templates allow: a simple list and a fly-out menu. However, you may want to have a collapsible menu instead. You can do this with some JavaScript code.

Preparation

In order to get this done, you will have to follow 3 simple steps:

1. Go to Settings > Store Settings > Display tab and set the categories to be displayed in a simple list (depth: 2)
2. Open the file called SideCategoryList.html (Design > Browse Template Files) and add the following code
   
3. Enjoy!

How does it look implemented on a BigCommerce store

Check out the video below to see how the collapsible category menu will look if implemented in the templates of a BigCommerce store.

<param name="movie" value="http://content.screencast.com/users/CIDaniel/folders/Jing/media/61ad7f35-c0b5-4865-afe1-1580ea4d398b/jingswfplayer.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<param name="flashVars" value="containerwidth=206&containerheight=220&thumb=http://content.screencast.com/users/CIDaniel/folders/Jing/media/61ad7f35-c0b5-4865-afe1-1580ea4d398b/FirstFrame.jpg&content=http://content.screencast.com/users/CIDaniel/folders/Jing/media/61ad7f35-c0b5-4865-afe1-1580ea4d398b/2012-02-15_2120.swf&blurover=false" />
<param name="allowFullScreen" value="true" />
<param name="scale" value="showall" />
<param name="allowScriptAccess" value="always" />
<param name="base" value="http://content.screencast.com/users/CIDaniel/folders/Jing/media/61ad7f35-c0b5-4865-afe1-1580ea4d398b/" />

If you have any improvements, or would like to say thanks just comment below!