Visual Composer (WPBakery) tabs issue when linking directly to an inner tab (like #phponline) using a URL anchor
π Key Takeaways
- Visual Composer (WPBakery) tabs issue when linking directly to an inner tab (like #phponline) using a URL anchor
this is a common Visual Composer (WPBakery) tabs issue when linking directly to an inner tab (like #phponline) using a URL anchor.
Letβs break it down and fix it step-by-step π
Why it happens
Visual Composer (VC) tabs rely on JavaScript initialization that runs after page load, and it only activates the first tab by default (the one with vc_active).
When you open a link like:
https://phponline.in/keys/#phponline
The page loads fine, but VCβs JS doesnβt βlistenβ to the hash (#phponline) β so it keeps showing the first tab instead of activating the one in the URL.
Fix Options
Option 1: Add small JavaScript to auto-switch tab from URL hash
Add this custom JS snippet in your site footer (or βCustom JSβ area if your theme/VC has one):
jQuery(document).ready(function($) {
var hash = window.location.hash;
if (hash) {
var $tabLink = $('a[href="' + hash + '"]');
if ($tabLink.length) {
// Remove active classes from all tabs and content
$('.vc_tta-tab, .vc_tta-panel').removeClass('vc_active'); // Activate the clicked tab
$tabLink.parent('.vc_tta-tab').addClass('vc_active');
$(hash).addClass('vc_active'); // Scroll to the tab if needed
$('html, body').animate({ scrollTop: $(hash).offset().top - 100 }, 500);
}
}
});
πΉ Where to place it:
- Inside Appearance β Customize β Additional CSS/JS β Custom JS
- OR inside your themeβs footer before
</body> - OR use a plugin like Simple Custom CSS and JS or Code Snippets.
Option 2: Use vc_tta-tabs built-in JS trigger
If the above doesnβt fully work, you can call VCβs native API after the tab init:
jQuery(window).on('load', function() {
var hash = window.location.hash;
if (hash && jQuery('a[href="' + hash + '"]').length) {
jQuery('a[href="' + hash + '"]').trigger('click');
}
});
This forces VCβs own event system to βclickβ the correct tab after the page fully loads.
Option 3: Fix links manually (if you can edit them)
Instead of #phponline, use the VC format:
https://phponline.in/keys/#vc_tta-tab-<ID>
β¦but this is usually less reliable because IDs can change when you edit the page.
Extra Tip
If you use caching or minification (like WP Rocket or Autoptimize), ensure the script isnβt deferred β otherwise, it might run before VC tabs finish initializing.
