I understand I can create URLs that direct to individual tabs, but I'm wondering if there is a way for these URLs to populate when the tab is clicked so the user will be able to see/use the direct tab URL.
jQuery(document).ready(function($) {
// Get all the tab links
var tabLinks = $('.wpb_tabs_nav li a');
// Loop through each tab link
tabLinks.each(function() {
var tabLink = $(this);
var tabTitle = tabLink.find('span').text(); // Get the tab title from the span element
// Add a click event listener to each tab link
tabLink.on('click', function(e) {
e.preventDefault(); // Prevent the default click action
// Change the URL in the address bar
var newURL = window.location.href.split('?')[0] + '?tab=' + encodeURIComponent(tabTitle);
history.pushState(null, null, newURL);
// Update the active tab appearance (if needed)
// Add your own code here to update the active tab appearance
// Fetch and display the content for the selected tab
// Add your own code here to fetch and display the content
return false;
});
});
});
Please add the code here, Salient > General Settings > CSS/Script Related:
Alternatively, you can use a third-party plugin to add the code to your theme. You can use this one https://wordpress.org/plugins/code-snippets/ or something similar to achieve this.
Hello,
I understand I can create URLs that direct to individual tabs, but I'm wondering if there is a way for these URLs to populate when the tab is clicked so the user will be able to see/use the direct tab URL.
I.E. instead of having https://careertechdc.org/programs direct to https://careertechdc.org/programs/finance, I can have it direct to https://careertechdc.org/programs/finance/?tab=accounting as the user lands on the first tab, Accounting. Then when they click the second tab, Finance, I would love to see the page redirect to https://careertechdc.org/programs/finance/?tab=finance. Is this possible using the tabs element or any other element?
Thanks!
Hey Again,
Try adding the JS code and check:
jQuery(document).ready(function($) { // Get all the tab links var tabLinks = $('.wpb_tabs_nav li a'); // Loop through each tab link tabLinks.each(function() { var tabLink = $(this); var tabTitle = tabLink.find('span').text(); // Get the tab title from the span element // Add a click event listener to each tab link tabLink.on('click', function(e) { e.preventDefault(); // Prevent the default click action // Change the URL in the address bar var newURL = window.location.href.split('?')[0] + '?tab=' + encodeURIComponent(tabTitle); history.pushState(null, null, newURL); // Update the active tab appearance (if needed) // Add your own code here to update the active tab appearance // Fetch and display the content for the selected tab // Add your own code here to fetch and display the content return false; }); }); });Thanks.
ThemeNectar Support Team
Thanks, Tahir. Should I add this code to my functions.php file or add it another way?
Hello Laura,
Thanks for choosing Salient.
Please add the code here, Salient > General Settings > CSS/Script Related:
Alternatively, you can use a third-party plugin to add the code to your theme. You can use this one https://wordpress.org/plugins/code-snippets/ or something similar to achieve this.
I hope that helps.
Kind regards,