Submenu links to tab sections

Hi,

Thank you for the inquiry.

You have to use an additional script in order to make it scroll or jump to the actual section, after clicking the menu item with the anchor. Please check the script that we provided in the following thread.

// https://kriesi.at/support/topic/anchor-links-scrolling-to-tab-section-not-working/#post-1289536

You may need to adjust the selector on the following line, depending on the actual element or link that contains the anchor.

scrollToTab( '.menu-item a', 'click' );

Best regards,
Ismael

Hi,

Thank you for following up.

You do not have to create a destination anchor inside the tab section, the script will handle that. The anchor should be based on the tab section title’s href attribute value, so for Behavioral Health for example, the menu item should have this URL.

http://site.com/what-we-do/#behavioral-health

And you have to remove the custom ID (behavioral) that you applied to the column element inside the Behavioral Health section.

Again, the anchor #behavioral-health is based on the href attribute value of the tab section title.

<a href="#behavioral-health" data-av-tab-section-title="2" class="av-section-tab-title av-tab-with-icon av-tab-no-image av-active-tab-title" role="tab" tabindex="0" aria-controls="av-tab-section-1-2" style="color: rgb(0, 0, 0);"><span class="av-tab-section-icon" aria-hidden="true" data-av_icon="" data-av_iconfont="fontello"></span><span class="av-outer-tab-title"><span class="av-inner-tab-title">Behavioral Health</span></span><span class="av-tab-arrow-container"><span style="background-color: rgb(53, 56, 60);"></span></span></a>

Best regards,
Ismael

Hi,

The script is actually not running correctly because of a jQuery error, found in the browser console. Please remove the code blocks containing the script, then use this one instead.

// custom script
// scroll to active tab section
function ava_custom_script_tab_section() {
?>
<script type="text/javascript">
(function($) {
	function scrollToTab(s, e,) {
		$(s).on(e, function(event) {
			var anchor, loc, cur, hash, tab, parent, pos;

			if( e == 'load' ) {
				loc  = window.location.hash;
				hash = loc;
			} else {
				loc = $(this).attr('href');
				hash = loc.substring(loc.indexOf('#'));
			}
	
			tab = $('.av-section-tab-title[href='+ hash +']');
			parent = tab.parents('.av-tab-section-outer-container');
			pos = parent.offset();

			tab.trigger('click');
			
			if(hash) {
				setTimeout( function() {
					$(window).scrollTop( pos.top - 100 )
				}, 1000 );
			}
		});
	}

	scrollToTab( '.menu-item a', 'click' );
	scrollToTab( window, 'load' );
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'ava_custom_script_tab_section', 9999 );

Best regards,
Ismael

Hi,

Thank you for the update.

The code above should be added in the functions.php file, not in a code block. Please remove all the code blocks containing the script and use the script above instead. You have to put it in the functions.php file.

Best regards,
Ismael

Hi,

Thank you for following up.

There is a closing tag at the very end of the functions.php file, so we removed it and added the script. We also removed the code block from the what-we-do page. It is working properly now.

Please make sure to purge the cache and hard refresh the page.

Best regards,
Ismael