Link Directly to Specific Tabs on Member Profile Pages Using the Tab's #ID in the URL
Link: https://support.brilliantdirectories.com/support/solutions/articles/12000095795
This article provides a JavaScript snippet that allows you to activate specific tabs on a webpage when the page loads, based on the hash in the URL.
The script checks if there's a hash in the URL, and if there is, it activates the corresponding tab and tab pane, while deactivating all others.
One key feature of this script is that it prevents the page from automatically scrolling down to the activated tab, keeping the viewport at the top of the page. This can be particularly useful for pages with long content, where you want to highlight a specific section without disrupting the user's navigation.
Place this code in the footer of the SEO Template or Custom Footer Code in Design Settings.
<script>
$(document).ready(function() {
var url = document.location.toString();
if (url.match('#')) {
var hash = url.split('#')[1];
$('.nav-tabs a[href="#' + hash + '"]').on('click', function(e) {
e.preventDefault();
}).tab('show');
$('.tab-pane').removeClass('active');
$('#' + hash).addClass('active');
}
});
</script>
Once the JavaScript snippet mentioned above is added to the footer, go to the member profile and open Inspect Mode.
Locate the <a> element for the tab. It will have a href value like #div4
Now the tab's ID can be appended to the profile URL like below:
https://example.com/united-states/beverly-hills/sample-category/john-smith#div16
When this URL is used, the script will automatically open the tab without scrolling, showing only that specific tab’s content.
