Tab block – adding anchor to tab within tab

  • On our website, we are using Kadence Tab blocks within Tab blocks (horizontal tabs for general categories, vertical categories for sub-categories). We need to create anchor links to these sub-tabs. I set the anchor link to these sub-tabs, but they are not working when accessing from another parent tab. The anchor links only work for first-level tabs. Sub-level tabs only work if the parent tab is already opened. I tried creating anchor links like mywebsite.com/#parentAnchorLink#subAnchorLink, but it didn’t work.

    I am including the link to our website. See the “Kalendorius” and “Mokymai” parent tabs. The “Mokymai” tab has sub-tabs that have their own sub-tabs. For example, I want an anchor link to Mokymai -> SOLIDWORKS_CAD -> SOLIDWORKS_bazinis. But if I make a link with an anchor to that deepest-level tab, it won’t work unless it’s parent is already opened.

    Please advise on how to make these anchor links work.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • hannah

    (@hannahritner)

    Hey @laukejas,
    I’m not sure if this is something you can do, but I’ll have the developer confirm. He’ll reply as soon as he’s available. Thanks for your patience!

    Hannah

    Hey,
    Hannah is correct there isn’t anything built into the tabs block that would allow this deep of anchor linking.

    Ben

    Thread Starter laukejas

    (@laukejas)

    hannah, Ben, thank you for replying. What are some other ways to produce links to these sub-tabs? Our company is considering going premium with Kadence, but we absolutely need functionality like this on our website.

    You would have to create a javascript that could handle it.

    For example adding something like this through a footer script plugin or as custom html:

    <script>
jQuery( document ).ready( function( $ ) {
	function custom_kadence_anchor_tabs() {
		if ( window.location.hash != '' ) {
			if ( $( window.location.hash + '.kt-title-item' ).length ) {
				var tabid = window.location.hash.substring(1);
				if ( $( '#' + tabid ).parents( '.wp-block-kadence-tab' ).length ) {
					$( '#' + tabid ).parents( '.wp-block-kadence-tab' ).each( function( a ) {
						var partentTab = $( this );
						var partentTabs = partentTab.closest('.kt-tabs-wrap');
						var partentTabID = partentTab.attr( 'aria-labelledby' );
						var partentTabNumber = $( '#' + partentTabID ).find( '> a' ).attr('data-tab');
						if ( ! partentTabs.hasClass( 'kt-active-tab-' + partentTabNumber ) ) {
							$( '#' + partentTabID ).closest( '.kt-tabs-title-list' ).find( '.kt-tab-title-active' )
								.addClass( 'kt-tab-title-inactive' )
								.removeClass( 'kt-tab-title-active' );
							$( '#' + partentTabID ).closest( '.kt-tabs-wrap' ).removeClass( function( index, className ) {
								return ( className.match( /\bkt-active-tab-\S+/g ) || [] ).join( ' ' );
							} ).addClass( 'kt-active-tab-' + partentTabNumber );
							$( '#' + partentTabID ).addClass( 'kt-tab-title-active' );
							$( '#' + partentTabID ).closest( '.kt-tabs-wrap' ).find( '.kt-tabs-accordion-title.kt-tabs-accordion-title-' + partentTabID ).addClass( 'kt-tab-title-active' ).removeClass( 'kt-tab-title-inactive' );
						}
					} );
				}
			}
		}
	}
	window.addEventListener( 'hashchange', custom_kadence_anchor_tabs, false );
	window.addEventListener( 'load', custom_kadence_anchor_tabs, false );
} );
</script>
    Thread Starter laukejas

    (@laukejas)

    Ben, thank you very much for taking the time to write that code. I am fairly familiar with PHP and CSS, but I haven’t done any Javascript. Would you be so kind to explain the usage of the script you wrote? Where do I insert it? How do I use it?

    I would suggest adding it in the footer of your site, many themes have a place for you to add code like this, if not you can use a plugin: https://www.ads-software.com/plugins/header-and-footer-scripts/

    Just copy the script from here and place in the footer script area.

    Ben

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Tab block – adding anchor to tab within tab’ is closed to new replies.