VinZ VinZ - 7 months ago 21
Javascript Question

jQuery tabs submenu with 3 levels

For one of my projects, I have a submenu using 3 levels of tabs to display the content in 3 columns (Ranges/SubRanges/SubRanges content).

See jsfiddle here : https://jsfiddle.net/kL8eeh94/1/

Here is my current jQuery :

$('.first > li').click(function() {
$('.first > li').removeClass('active');
$(this).addClass('active');
});
$('.first li .second > li').click(function() {
$('.first > li > .second > li').removeClass('active');
$(this).addClass('active');
});


Now what I can't figure out to do is when I click on a Range tab (first column), I want its chidren SubRanges to be displayed (as it is today in the 2nd column), but also with the first SubRange tab active dy default (so that its content is also displayed on the third column). This way, when you click on the Range tabs, you see the SubRange and SubRange content columns contextualized in function of the selected Range.

Answer

I've found the solution on my own by folding my item with span tags and then having this JS :

$('.first > li span').click(function() {
    $('.first > li, .first > li .second > li').removeClass('active');
    $(this).parents('li').addClass('active');
    $(this).parent().find('ul li:first-child').addClass('active');
});
$('.first li .second > li span').click(function() {
    $(this).parents('li').addClass('active');
});

See here : https://jsfiddle.net/kL8eeh94/2/

Comments