Snippet: Add Unique Classnames To Each VC Tabs Tab

Updated: August 7, 2017

This code will add a unique class to each tab and tab content in the format of tab-index-{count} so if you need to target tabs independently via CSS it would be possible.

// Add unique classnames to VC tabs
add_action( 'wp_footer', function() { ?>

	
	( function( $ ) {

		$( document ).on( 'ready', function() {

			$( '.vc_tta-tabs' ).each( function() {
				var $tabs = $( this ).find( '.vc_tta-tab' );
				$tabs.each( function( index, value ) {
					$( this ).addClass( 'tab-index-' + index );
				} );
				var $tabContent = $( this ).find( '.vc_tta-panel' );
				$tabContent.each( function( index, value ) {
					$( this ).addClass( 'tab-index-' + index );
				} );
			} );

		} );

	} ) ( jQuery );
	

<?php } );

All PHP snippets should be added via child theme's functions.php file or via a plugin. We recommend Code Snippets (100% Free) or WPCode (sponsored)