search

cferdinandi / tabby

Lightweight, accessible vanilla JS toggle tabs.
MIT License
602 stars 73 forks source link

Nested tabs #102

Closed acespace90 closed 5 years ago

acespace90 commented 5 years ago

Hi, it seems that is not possible to create nested tabs. Is it right? How can I do it?

Codepen here: https://codepen.io/acespace90/pen/MxrgLz

cferdinandi commented 5 years ago

Ignoring that this isn't a great pattern for user interfaces, you would need to give the nested tabs their own selector and instantiate them separately from the parent.

<ul data-tabs>
    <li><a data-tabby-default href="#harry">Harry Potter</a></li>
    <li><a href="#hermione">Hermione</a></li>
    <li><a href="#neville">Neville</a></li>
</ul>

<div id="harry">
  <ul data-tabs-sub>
    <li><a data-tabby-default href="#aaa">aaa</a></li>
    <li><a href="#bbb">bbb</a></li>
  </ul>
  <div id="aaa">aaa</div>
  <div id="bbb">bbb</div>
</div>
<div id="hermione">hermione</div>
<div id="neville">neville</div>
var tabs = new Tabby('[data-tabs]');
var tabsSub = new Tabby('[data-tabs-sub]');

https://codepen.io/cferdinandi/pen/Qoaavw

Note: I added CSS to make it more visually obvious what's going on.

acespace90 commented 5 years ago

Ah ok, it would have been nice if there was only one init. But okay ¯_(ツ)_/¯

P.S.: is not always a bad pattern, it depends, for what I'm developing is a good pattern because I have both horizontal and vertical tabs ;-)