Ability to call nested tabs with anchors?

[PrzemyslawKlys]

I'm trying to some basic functionality and was wondering if it's possible to call tabs that are nested with anchors?

So one could call URL and change to 3rd tab of 2nd tab right away.

<link href="https://cdn.jsdelivr.net/gh/cferdinandi/tabby@12/dist/css/tabby-ui.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/gh/cferdinandi/tabby@12/dist/js/tabby.polyfills.js" type="text/javascript"></script>

<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">
    <h2>Harry Potter</h2>

    <p><strong>Fun Facts:</strong></p>
    <ol>
        <li>"The boy who lived"</li>
        <li>Best friends with Ron and Hermione</li>
        <li>Fails up on a regular basis</li>
    </ol>
    <p><a href="https://en.wikipedia.org/wiki/Harry_Potter_(character)">More about Harry &rarr;</a></p>
</div>

<div id="hermione">
    <h2>Hermione</h2>
    <ol>
        <li>The real hero of the Harry Potter series</li>
        <li>Underappreciated by her friends, but always saves the day</li>
        <li>Harry somehow gets credit for her accomplishments on a regular basis</li>
    </ol>
    <p><a href="https://en.wikipedia.org/wiki/Hermione_Granger">More about Hermione &rarr;</a></p>
    <ul data-tabs>
        <li><a data-tabby-default href="#harry1">Harry Potter 1</a></li>
        <li><a href="#harry2">Harry Potter 2</a></li>
        <li><a href="#harry3">Harry Potter 3</a></li>
    </ul>
    <div id="harry1">
        <p><strong>Harry 1</strong></p>
        <ol>
            <li>The real hero of the Harry Potter series</li>
            <li>Underappreciated by her friends, but always saves the day</li>
            <li>Harry somehow gets credit for her accomplishments on a regular basis</li>
        </ol>
        <p><a href="https://en.wikipedia.org/wiki/Hermione_Granger">More about Hermione &rarr;</a></p>
    </div>
    <div id="harry2">
        <p><strong>Harry 2</strong></p>
        <ol>
            <li>The real hero of the Harry Potter series</li>
            <li>Underappreciated by her friends, but always saves the day</li>
            <li>Harry somehow gets credit for her accomplishments on a regular basis</li>
        </ol>
        <p><a href="https://en.wikipedia.org/wiki/Hermione_Granger">More about Hermione &rarr;</a></p>
    </div>
    <div id="harry3">
        <p><strong>Harry 3</strong></p>
        <ol>
            <li>The real hero of the Harry Potter series</li>
            <li>Underappreciated by her friends, but always saves the day</li>
            <li>Harry somehow gets credit for her accomplishments on a regular basis</li>
        </ol>
        <p><a href="https://en.wikipedia.org/wiki/Hermione_Granger">More about Hermione &rarr;</a></p>
    </div>
</div>

<div id="neville">
    <h2>Neville</h2>

    <p><strong>Fun Facts:</strong></p>
    <ol>
        <li>The surprise hero of the last book</li>
        <li>His life is forever intertwined with Harry's</li>
        <li>Total badass</li>
    </ol>
    <p><a href="https://www.pottermore.com/explore-the-story/neville-longbottom">More about Neville &rarr;</a></p>
</div>

<script>
    const tabSelectors = document.querySelectorAll('[data-tabs]');
    if (tabSelectors) {
        for (const [i, tabs] of [...tabSelectors].entries()) {
            tabs.setAttribute('data-tabs', i);
            new Tabby(`[data-tabs="${i}"]`);
        }
    }

    function toggleTabs(sel) {
        for ([i, tabs] of [...tabSelectors].entries()) {
            tabs = new Tabby(`[data-tabs="${i}"]`);
            document.querySelectorAll(sel).forEach(tab => tabs.toggle(tab));
        }
    }
</script>