URL anchor hash, then open a tab using another id via URL

Question

I need a URL parameter to select a section via the hash ID (#features) and then open tab #2 within that section (Tab 1 is open by default). I want to use index.html#features and then once it has located that section, open tab #2 (#tab2).

My js below looks for the hash in the URL, if the hash is shown, trigger a click effect for the hash. I was trying to use index.html#tab2, but it won't move down to that #features section and so I'm not sure how to solve this.

The #features section is near the bottom of the page, so I need to first locate this section and then open the 2nd tab.

JS Fiddle

<article id="features">
    <div class="tab-wrapper">
        <ul class="tab-wrapper__tab-list" role="tablist">
            <li role="presentation">
                <a href="#tab1" role="tab" aria-controls="panel0">Tab One</a>
            </li>
            <li role="presentation">
                <a href="#tab2" role="tab" aria-controls="panel1">Tab Two</a>
            </li>
            <li role="presentation">
                <a href="#tab3" role="tab" aria-controls="panel2">Tab Three</a>
            </li>
        </ul>

        <div id="tab1" class="tab-wrapper__tab" role="tabpanel">
            <div class="tab-wrapper__content-wrapper">
                <p>Lorem ipsum dolor sit amet, nam an purto autem contentiones. Cum solet verear petentium ut, an incorrupte interesset sit, eu sea dicant suscipit definiebas. Ut illum habemus sententiae sea, nec nibh accusata an. Tempor dissentias ea nam. Utinam volutpat sed at, dicta errem cu est.</p>
            </div>
        </div>

        <div id="tab2" class="tab-wrapper__tab" role="tabpanel">
            <div class="tab-wrapper__content-wrapper">
                <p>Vel zril putent incorrupte ei. Cu tation veniam euripidis vel, diceret minimum deserunt an ius. Eam ex probatus laboramus, cum ad noluisse suscipit, everti accusata id eam. Ius et commune recusabo, id munere alterum mei. Rebum oratio malorum usu te, no feugait inciderint eos. Eum viderer deseruisse instructior at. Nusquam expetenda eam et.</p>
            </div>
        </div>

        <div id="tab3" class="tab-wrapper__tab" role="tabpanel">
            <div class="tab-wrapper__content-wrapper">
                <p>Tacimates consetetur his eu. Amet persecuti an eum, ne facete audiam mei. Pri et alia urbanitas, dicunt tacimates eos eu. Ut sit inani urbanitas. Has in equidem atomorum accommodare. Te vim decore cetero intellegebat. Saepe timeam posidonium pro te, nulla insolens adipisci ne vis.</p>
            </div>
        </div>
    </div>
</article>

<script>
    $(function () {
        var hash = $.trim(window.location.hash);

        if (hash) $('.tab-wrapper__tab-list a[href$="'+ hash +'"]').trigger('click');
    });
</script>

score 0 · Answer 1 · edited May 23 '17 at 10:34

Have you tried scrolling to the tab button with #tab2 in the URL? This would solve your problem with scrolling down to the features section, as the #tab2 element is on top of the features section.

A JSFiddle runs in an iframe and you need to provide the hash inside the link of the iframe. A workaround for this is just setting the hash with JavaScript. If you set window.location.hash = "tab2"; as the first line in your script section, it scrolls down and displays the second tab.

If you insist on scrolling to the #features element, you can realize that pretty easy with JavaScript. This allows you also to create an animated scroll down to the section. See this answer for more information about that: https://stackoverflow.com/a/16475234/3233827

URL anchor hash, then open a tab using another id via URL

1 Answers1