Tagged: ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
  • #1294845

    I am having trouble creating links to tab sections in my website. We’d like to have the user go to the specified page and have the selected topic from the submenu open the tab user clicks the submenu link

    Flow would be:

    What We Do>Direct Services>Primary Care (tab)

    I’ve tried using the developer section w/ anchor tags but it’s not working. Any help would be appreciated.


    I have a similar problem:

    I trying to jump to a specific element in a tab section via a button.

    While using the “section id” as stated in the documentation changes the tab section itself, the page doesn’t scroll or jump to the specific place (but changes to the correct tab).

    On the other hand, giving an item inside a tab section (for example a catalogue) a unique id and referring to that, the pages jumps to the correct position – but not the right tab.

    Any help appreciated :)



    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,


    Thank you Ismael. I’m seeing a few problems when I’ve tried to add the code blocks. Assuming I need to add the code for each corresponding tab, replacing the ‘a’ in ( ‘ .menu-item a’ , ‘click’ ); with the correct tab anchor (ie. #history). I tested it out on one page and it works, partially. However the tab element disappears and it’s not fully working. Any idea what I’m missing?



    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.


    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,


    Thanks again Ismael,
    We are getting closer. I have removed the anchor tags from the columns within the tabs, and then I added a code block using the code provided in your previous response. I then updated the main menu custom links to correspond with the tab title (#cchhistory) for example. I have tested it and when navigating from another page, like the home page, I’m directed to the correct page and the correct tab is open. However, I land at the top of the page, I’d like to land at the tab section, with the correct tab open. Also, I am not seeing it working when navigating while on the particular page. For this example I’m on the “who we are” page. Thank you again for your continued help!



    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();
    			if(hash) {
    				setTimeout( function() {
    					$(window).scrollTop( pos.top - 100 )
    				}, 1000 );
    	scrollToTab( '.menu-item a', 'click' );
    	scrollToTab( window, 'load' );
    add_action( 'wp_footer', 'ava_custom_script_tab_section', 9999 );

    Best regards,


    Thank you again Ismael. I have updated the code blocks (one on each page where there’s a tab element). The menu is updated too with links corresponding to the tab titles on appropriate pages. However, when I click the menu item to link to the tab, it does take me to the correct page and the correct tab opens. BUT it does not bring me to that element on the page, just to the top of the page. Do I need to place the code block in a specific place or make another adjustment? Thank you for your help.



    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,


    I received the following error when placing in the functions.php file

    Your PHP code changes were rolled back due to an error on line 49 of file wp-content/themes/enfold-child/functions.php. Please fix and try saving again.

    syntax error, unexpected ‘}’, expecting end of file



    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,


    Great. Thank you! I will purge cache and refresh.


    Thank you Ismael, the element is now working! Last question, more of a formatting issue. When I click a subnavigation link to a tab element on a different page it jumps to the very bottom of the element. Is there a way to land at the top of the tab element, so correct tab is open and other tabs are visible?



    Glad to know that it is now working. Regarding the scroll position, try to adjust this line to control the final scroll position in the document after clicking an anchor.

    $(window).scrollTop( pos.top - 100 )

    The code above tells the script to scroll to the actual position of the tab section container minus 100px.

    Best regards,


    Hi there,

    I got a similar problem on my page within the tabsection “Besucherinfo”. In the first tab “Besuch” I got a button linked to the last tab “Kontakt”, but it works only once (when the page has loaded the very first time) and then only the url changes but nothing else happens.

    I tried to implement the code into the functions.php which you provided above. But it seems not work on my site. Do I need something different?

    Many thanks in advance!
    Kind regards,

    PS: I put the login credentials in the private content section.


    I noticed that it starts to load the page from the link after refreshing the page.

    So I got following sequence:
    1) At the very first page load of /besucherinfo, everything is fine: the “Kontakt”-tab opens when I click on the button “zum Kontaktformular” in the “Besuch”-tab.
    2) Than I go back to the first tab and click the button again, or wander from page to page and come back to the /besucherinfo.
    3) Again I click the button “zum Kontaktformular”
    4) The URL changes
    5) The “Kontakt”-tab does not load.
    6) I refresh the browser – and violá – the “Kontakt”-tag loads!

    Maybe this helps figuring out the problem.
    Best wishes,


    I think I gonna start a new thread ;-)



    : Sorry for the delay. The script above is created for the default menu but you can adjust it so that it works correctly when using a custom button. Look for the following code and replace the selectors “.menu-item a” or “window” with the actual class name of the custom button.

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

    If you need more help, please open a new thread. We will close this thread for now.

    Best regards,

Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Submenu links to tab sections’ is closed to new replies.