Rıfat Yerusalmi Rıfat Yerusalmi - 1 month ago 8
HTML Question

Multilevel Vertical Tab jquery

I have been trying to build a multi-level vertical tabs with hidden content which gets visible by some jquery. It is working fine but with it has one problem.

Because of this code:

$(this).nextUntil("li.tabsclose").slideToggle();


When page loads for the first time, all the parent categories are shown but if you click on a category with some sub-categories, jquery hides everything until the next item with "tabsclose" class. Which is a problem because I have some Parent categories towards the end of the list.

Here is the jsfiddle: https://jsfiddle.net/ebf6cdpe/

Thank you very much for your help in advance!

Answer

This particular piece is causing all the Parent categories without subcategories to be hidden:

$('.subtabs').not(this).nextUntil(".subtabs").slideUp();

If you remove that, all the Parents without subcategories won't disappear permanently. However, there is still an issue with them temporarily disappearing when opening the subcategory.

You need to have a class that is applied to all your parents that you can use as a selector in this loop:

$(this).nextUntil("li.tabsclose").slideToggle();

I'm still not 100% sure this is the exact functionality you want, but here is an updated version:

https://jsfiddle.net/ebf6cdpe/1/

Whatever the case, you may be better off using nested lists for your subcategories. https://www.w3.org/wiki/HTML_lists

Comments