ACF: Link to Specific Tab

Advanced Custom Fields, or ACF, provides a great user interface for defining and laying out custom fields for Posts, Pages, Custom Post Types, Options, Users and more in WordPress. The Tab Field provides an easy way to clean up your user interface by seperating different field inputs into different tabs, making it easier for your users to find what they are looking for.

One feature that is missing from the Tab field however is the ability to link directly to a specific tab from another page. We can work around this with some pretty straightforward JavaScript. In short when the acf “ready” event fires, we want to look at all the tab buttons, and if any match our URL hash (in lowercase with spaces replaced with hyphens) then we “click” that link, loading the appropriate tab. Subsequently we can update the hash in the address bar any time a new tab is clicked making it easy for uses to bookmark the page or send the link to another user.

If your tab name is “Options Tab 1” the link to it would be something like edit.php?post_type=my-post-type#options-tab-1.

(function($){
	// run when ACF is ready
	acf.add_action('ready', function(){
		// check if there is a hash
		if (location.hash.length>1){
			// get everything after the #
			var hash = location.hash.substring(1);
			// loop through the tab buttons and try to find a match
			$('.acf-tab-wrap .acf-tab-button').each(function(i, button){ 
				if (hash==$(button).text().toLowerCase().replace(' ', '-')){
					// if we found a match, click it then exit the each() loop
					$(button).trigger('click');
					return false;
				}
			});
		}
		// when a tab is clicked, update the hash in the URL
		$('.acf-tab-wrap .acf-tab-button').on('click', function($el){
			location.hash='#'+$(this).text().toLowerCase().replace(' ', '-');
		});
	});
})(jQuery);