I'm going to do my best to describe my problem. This community has helped me before, so I'm hoping someone will be kind enough to lend me their help once again. I don't really know much about JQuery.
We're setting up a wordpress site using Easy Digital Downloads, because of that we have some restrictions, like not being able to change the HTML, but we can add add JQuery elements on a page.
This is for a category selection system where a user should be able to select only 1 parent category and multiple sub categories under that parent.
I'm looking for a JQuery solution for the following scenario.
We have 5, potentially 6, "categories". These categories have sub categories represented by a UL. By default the sub categories should be hidden. When you click a parent category it should display the sub categories below. If you at any point click the same parent category, it should unselect all children and hide them again.
I also only want 1 parent category to be selected at any given point.
Let me give you a scenario. You click on Cat A, it expands and shows 4 sub categories. You click 2 of those sub categories. You change your mind and instead click on Cat B. This should then hide the sub categories of Cat A and unselect the children, as well as the parent of Cat A.
Just if I haven't made it clear enough, it's important that you can never select a sub category without a parent category.
I've made a basic fiddle with something I found in another thread. Just is just for showing and hiding (though I haven't added a class for hiding yet) This has the html structure we're using.
Another issue is that all of the parent categories use the same class for the children (.children)
$('#in-download_category-156').click(function() {
$(".children").toggle(this.checked);
});
I know this is a big ask, so I appreciate any help you can throw my way! Thank you
Aucun commentaire:
Enregistrer un commentaire