VinZ VinZ - 2 years ago 98
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 :

Here is my current jQuery :

$('.first > li').click(function() {
$('.first > li').removeClass('active');
$('.first li .second > li').click(function() {
$('.first > li > .second > li').removeClass('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 Source

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).parent().find('ul li:first-child').addClass('active');
$('.first li .second > li span').click(function() {

See here :

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download