Okay
  Public Ticket #4533935
Linking to tabbed sections
Open

Comments

  •  14
    Melanie started the conversation

    I am trying to link to specific tabbed sections within an anchored element and am running into some issues.

    I found ticket #897729 and tried the method posted in there (https://nexttherapist.com/therapists/?tab=Effortless-Scheduling#how-it-works), but it doesn't seem to be working. When the linked element is clicked (top left is the one I am currently testing), it just goes to https://nexttherapist.com/therapists/#how-it-works and removes the ?tab= section completely.

    I have also tried the following: 

    • Made sure "One Page Scroll Support (Animated Anchor Links)" is also enabled in my Salient settings.
    • Tried purging my page cache after saving. 
    • Tested the tab title - lower case vs uppercase

    None of those seemed to make a difference.

    Appreciate any help you can provide. Thank you!
    Melanie

  •  3,281
    Ephraim replied

    Hi Melanie,

    Thanks for writing in, and hope you're doing well!

    I understand the frustration when anchor links and tab parameters don't play nicely together. The behavior you're seeing, where the ?tab= parameter is stripped from the URL, is typically caused by the Salient "One Page Scroll" script or a JS conflict that prioritizes the ID hash (#) over URL parameters.

    To resolve this, we need to ensure the script can read the URL parameter before the page scroll takes over. Please try the following steps:

    1. Adjust the URL Structure

    Sometimes the browser struggles when the anchor follows the parameter without a trailing slash. Try formatting your link like this: https://nexttherapist.com/therapists/#how-it-works?tab=Effortless-Scheduling Alternatively, try placing the tab parameter first, but ensure the link doesn't trigger a "smooth scroll" override by adding a class of no-scroll to the link if you've added it manually via HTML.

    2. Verify Tab "Slug" Accuracy

    Salient generates tab IDs based on the title. Ensure "Effortless-Scheduling" matches exactly how Salient sees it.

    • Open your page in the browser.

    • Right-click the specific tab and select Inspect.

    • Look for the href or id attribute of that tab (e.g., #tab-123456789).

    • Try using that specific ID in your URL: ?tab=tab-123456789#how-it-works.

    3. Custom JavaScript Fix

    If the URL is still stripping the parameter, you can add this small script to Salient > General Settings > CSS/Script Related > Custom JS Code. This script forces the correct tab to open based on the URL parameter upon page load:

    jQuery(document).ready(function($) {
        var urlParams = new URLSearchParams(window.location.search);
        var tabToOpen = urlParams.get('tab');
        
        if (tabToOpen) {
            // Find the tab link that contains the text or ID from the URL
            $('.wpb_tabs_nav li a').each(function() {
               if ($(this).text().trim().replace(/\s+/g, '-').toLowerCase() == tabToOpen.toLowerCase() || $(this).attr('href').indexOf(tabToOpen) !== -1) {
                   $(this).click();
               }
            });
        }
    });
    4. Final Configuration Checks
    • Clear Cache: to ensure the scripts are re-merged.

    • One Page Scroll: If you are using the "One Page Scroll" row setting, try disabling it temporarily on that specific page to see if it resolves the parameter stripping.

    • Check Version: Ensure you are on Salient v18.0.2, as recent updates improved the handling of deep-linking for tabbed elements.

    Hope this helps! 

    If you have any further questions or encounter any difficulties along the way, please don’t hesitate to reach out.

    Best regards