[jQuery] Collapsible/Accordion Listing

[aDeviKreates]

Greetings All!

I am attempting to create a price list as follows:

Product
Product Category
Items

When the user comes to the page, I want all the Products to be visible
with their Categories and Items hidden.

Once the user clicks on the Product, I want the Categories to be
displayed with their Items still hidden.

Once the user clicks on a Category, then I want the items to be
displayed.

I can get this to work halfway, showing the group of Products and when
I click on the Product it does display the list of Categories for that
Product.  However, I am stuck here.  I cannot get it to when I click
on the Category this list of items is displayed.

Here is my code (I am using <h3><div><h4> tags - I was trying to go by
the More Showing, More Hiding tutorial, but it's not working for me)

        $(document).ready(function() {
                $('div.demo-show > div').hide();
                $('div.demo-show > h3').click(function() {
                        $(this).next().slideToggle('fast');
                });
                        $('div.demo-show > prodcat.h4').click(function() {
                                //$(this).next().slideToggle('fast');
                        });
        });

Thanks in advance for any assistance provided.

CREATE A GREAT DAY!