How do I go about creating an interactive file tree sidebar for Wordpress?

I can't seem to find a tutorials on how to create a custom file tree sidebar.

I want to emulate something like this for a list of products on a WordPress site.

Here's their HTML/CSS/JS code on this page.

I appreciate all your time and patience with me as I learn.

Also to let you know that I've tried to think this through, here's my STRATEGY: (feel free to make/add changes, these are just my train of thought, it may be wrong.)

• build out the sidebars in separate PHP files. I would make one PHP sidebar file per product group. (so one for Citrus, one for Apples, ..., and one for the main products page)

• call the appropriate sidebar PHP file into the appropriate product pages (great opportunity to use if...elseif I guess?). I may need to edit/create a template for the products pages.

• add jQuery events so the sidebars expand/contract nicely

via Chebli Mohamed