[jQuery] Collapsible/Accordion Listing
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!