Creating a unique URL to a specific tab

Design help Custom code
1

Hi!

I am trying to create unique links for each tab on the treatments page of the below website. I want the treatment dropdown links in the header link to each specific tab, vs just linking to the first tab on the treatments page.

Is anyone able to help me with this? I’ve tried reading through some of the forums to sort this out myself but I am not very code savvy.

Thanks in advance,
Alyssa

https://preview.webflow.com/preview/baker-rejuvenation-centre?utm_medium=preview_link&utm_source=designer&utm_content=baker-rejuvenation-centre&preview=160752f1b3a8c9d6b43aa639e7802e08&workflow=preview

1 Like
2

Hi @AlyssaLaurenDesigns,

You should be able to do this by assigning an ID to the Tab Content. I can see you’ve assigned an ID to the link (screenshot here) - you’ll just need to reassign this ID to the Tab Pane instead.

For example, you can remove the ‘injectables’ ID from the second ‘Adjacent Tab Link’, assign it to ‘Tab Pane [Injectables]’ and republish your site.

You should then be able to access this tab directly from https://www.bakerrejuvenation.com/treatments#injectables

Hope this helps! Let me know if you get stuck.

1 Like
3

Hi Milan,

Thanks so much for the response!

I’ve switched the ID over to the Tab Panes instead, and used the unique URL for each link in the menu dropdown, but it doesn’t seem to be working. Am I missing something?

Thank you again!
Alyssa

4

Hi @AlyssaLaurenDesigns,

Sorry, it looks like you’ll need custom code in combination with the IDs, if you just add this code to Treatments > Page Settings > Custom Code > Before </body> tag:

<script>
$( function() {
    function changeTab() {
        var tabName = window.location.hash.substr(1);
        var tabEl = $('[data-w-tab="' + tabName + '"]');
        if (tabEl.length) {
            tabEl.click();
        }
    }

    //when page is first loaded
    if(window.location.hash){
        changeTab();
    }

    //internal page linking
    $(window).on('hashchange', changeTab);

    $('[data-w-tab]').on('click', function(){
        history.pushState({}, '', '#'+$(this).data("w-tab"));
    });
});
</script>

Code source here: Solution - creating an URL link for a specific tab

Let me know how you go!

2 Likes