Instantiate multiple instances with the same selector

I’m trying to run multiple instances of Tabby on a page and can get this to work if I give each instance a unique selector and instantiate them independently:

<script>
var tabs = new Tabby('[data-tabs-1]');
var tabs = new Tabby('[data-tabs-2]');
</script>

Is there instead a way to instantiate all instances on the page which share a common selector?

Many thanks in advance.

[danielpost]

This doesn’t seem to be possible at the moment, since Tabby runs querySelector on the selector, which by default only returns the first instance of the elements matching the selector.

You could probably solve this by running your own querySelectorAll to find all instances of your tabs, then initiate all of them separately. Try something like this (untested):

const tabSelectors = document.querySelectorAll('[data-tabs]');

for (const [i, tabs] of [...tabSelectors].entries()) {
    tabs.setAttribute(`data-tabs-${i}`, '');
    new Tabby(`[data-tabs-${i}]`);
}

[danielpost]

@arnojong I think this should work (untested):

const tabsSelectors = document.querySelectorAll('[data-tabs]');

for (const [i, tabsContainer] of [...tabsSelectors].entries()) {
    tabsContainer.setAttribute(`data-tabs-${i}`, '');
    const tabs = new Tabby(`[data-tabs-${i}]`);

    tabs.toggle('#harry');
}

Please note that all code needs to be within the for..of loop