Docs

[vegaswiccan]

Hi everyone,

I have a section that has four tabs with a lot of content. I’m currently trying to create a link at the end of each tab that will automatically navigate the user to the next tab. I’ve tried using the “div_id” method but it doesn’t work. I’ve looked at a couple of threads that had some jQuery code, but I’ve failed to get it to work. Can someone help?

The page I’m working on is: http://www.wiccanuniverse.com/what-is-wicca/wiccahistory/

Themeco, I’ll send username and password in a separate private reply.

[vegaswiccan]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

Please check this other thread,

https://community.theme.co/forums/topic/opening-specific-tabs-with-linksbuttons/?replyto=867962#post-881667

The linking should be /#tab-1, #tab-2, and so on. But you can customize it like #hello-world-1, #hello-world-2, #hello-world-3 and so on just as long you replace this code

window.location.hash.split('#tab-')[1]

with this code

window.location.hash.split('#hello-world-')[1]

The important part of it that should be retained are the indexes(number).

Cheers!

[vegaswiccan]

Thanks. That almost works. If I navigate to the /#tab-2, /#tab-3, etc. directly, it pulls up the proper tab. However, at the bottom of the first tab, I included a link to navigate to tab 2; when I click it, the URL changes to /#tab-2 but it doesn’t navigate to the tab.

[Rupok]

Hi there,

Thanks for writing back. When we are okay with few tweaks, we really can’t assist on in-depth customization that requires complex code. Further customization from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[vegaswiccan]

I’ve seen in past posts when I was researching this issue that you’ve assisted others with this issue. I don’t see what is so different about my request that you’re stating that the custom code is “too complex.”

[Rad]

Hi there,

Yes, they are old posts. Not all codes given from the past are applicable to what you’re customizing now. They are easier that the structure that it has now. Again, we provided the tweaks for those old posts since they are achievable with few changes. But that doesn’t mean we will provide same tweaks on every new thread where complexity is much higher.

But since the code is already provided, then you can change it to this

jQuery ( function( $ ) {

	function link_to_tab( tab_id ) {
		
		if ( tab_id > 0 ) {

			$('.x-nav.x-nav-tabs .x-nav-tabs-item:nth-child(' + tab_id + ') a').trigger('click');

			setTimeout( function() { 

				$('html,body').stop().animate({ scrollTop: $('.x-tab-content > .x-tab-pane:nth-child(' + tab_id + ')').offset().top - ( $('.x-navbar').height() + 45 ) },700 ,'swing');

				}, 300 );

			}

	}

	$( document ).ready ( function() {

		link_to_tab( parseInt( window.location.hash.split('#tab-')[1] ) );

	} );

	$('a.link_to_tab').on('click', function(e){

		e.preventDefault();

		link_to_tab( parseInt( $(this).attr('href').split('#tab-')[1] ) );

	} );

} );

This also integrated the tab link to any link that has link_to_tab class name. For example,

<a href="#tab-1" class="link_to_tab">Link to Tab 1</a>

Any further modification is not supported, you may enhance it to your preference.

Thanks!

[vegaswiccan]

I appreciate your extra assistance. That worked perfectly. Thanks so much!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts