Is it possible to have 2 levels of tabs?

[dameert]

In one of our projects we need 2 levels of tabs. In order to test this we adapted the code sample to have a 2nd level of tabs in the "#id_first" tab. However, after the fourth tab, when moving right, the 5th one is opened (seems logique, but the 5th one is in fact a subtab of the first one). So the 5th tab should only open after we enter in the content tab of #id_first. Is there a workaround?

<div class="js-tabs">
	<ul class="js-tablist">
		<li class="js-tablist__item"><a class="js-tablist__link" href="#id_first" id="label_id_first">1st tab</a></li>
		<li class="js-tablist__item"><a class="js-tablist__link" href="#id_second" id="label_id_second">2nd tab</a></li>
		<li class="js-tablist__item"><a class="js-tablist__link" href="#id_third" id="label_id_third">3rd tab</a></li>
		<li class="js-tablist__item"><a class="js-tablist__link" href="#id_fourth" id="label_id_fourth">4th tab</a></li>
	</ul>
	<div class="js-tabcontent" id="id_first">
	here the content of 1 tab
		<div class="js-tabs">
			<ul class="js-tablist">
				<li class="js-tablist__item"><a class="js-tablist__link" href="#id_sub_1" id="label_id_sub_1">1st sub tab</a></li>
				<li class="js-tablist__item"><a class="js-tablist__link" href="#id_sub_2" id="label_id_sub_2">2nd sub tab</a></li>
			</ul>
			<div class="js-tabcontent" id="id_sub_1">sub tab 1</div>
			<div class="js-tabcontent" id="id_sub_2">sub tab 2</div>
		</div>
	</div>
	<div class="js-tabcontent" id="id_second">here the content of 2nd tab</div>
	<div class="js-tabcontent" id="id_third">here the content of 3rd tab</div>
	<div class="js-tabcontent" id="id_fourth">here the content of 4th tab</div>
</div>

[nico3333fr]

Hi,

yes it is possible, in fact, I made the choice to have "cool" selectors like $all_tab_links = $parent.find( ".js-tablist__link" ) which are selecting all childs (including sub-childs). It allows to be cool if you need extra-divs in the tab structure (and nested tabs are not the most frequent case I have).

However if you want to have nested tabs, it can create problems, like the one you encountered. :-\

I've made a quick test with stricter selectors like > .js-tablist > .js-tablist__item:first-child > .js-tablist__link (see attached file), it seems to be ok with nested tabs for me, could you test and confirm it is working for you ?

jquery-accessible-tabs.zip

If it is okay for you, I will probably upload this file and explain the workaround. Anyway, at the next refactoring, I will probably set it up as an option.

Could you confirm it works now?

[dameert]

We tested this, it works very nicely! Thank you for the fast fix.

[nico3333fr]

Thanks for testing it too (it was quickly-done) :)

[nico3333fr]

Hi,

updates are committed, see https://github.com/nico3333fr/jquery-accessible-tabs-aria/blob/master/jquery-accessible-nested-tabs.js ;)

Thanks a lot.