New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is it possible to have 2 levels of tabs? #17

Closed
dameert opened this Issue Mar 31, 2017 · 4 comments

Comments

Projects
None yet
2 participants
@dameert
Copy link

dameert commented Mar 31, 2017

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

This comment has been minimized.

Copy link
Owner

nico3333fr commented Mar 31, 2017

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?

@nico3333fr nico3333fr self-assigned this Mar 31, 2017

@dameert

This comment has been minimized.

Copy link

dameert commented Mar 31, 2017

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

@nico3333fr

This comment has been minimized.

Copy link
Owner

nico3333fr commented Mar 31, 2017

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

@nico3333fr

This comment has been minimized.

Copy link
Owner

nico3333fr commented Mar 31, 2017

@nico3333fr nico3333fr closed this Mar 31, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment