[pmuilenburgParticipant]

Sorry to bother everyone again with an old topic, but i’m going back and forth between old post on the forum and for the life of me I can’t seem to find the solution :(. I’m using Icon, with a Child theme. One of the website pages where I use the tabs and have the problem is: http://www.pm-fotografie.nl/particulier/pasfoto
WP: 4.7.2; Cornerstone: 1.3.3 ; X-theme: 4.6.4

It worked once, so what has gone wrong is above my head.

I simply want to use the tabs in the pages to link to.
So I have set up my page with 3 or more tabs and in the text I have a link that has to take you to the tab straight away. As said it worked a while ago. But after some update a while back it stopped working.
Finally have found the time again to jump into the problem. Found that the call for java is already in the new versions, so I have changed the Child theme already. Also tried it without the Child theme.

Whatever I do I can’t seem to be able to get it working again. A hint in the rigth direction is much appreciated.

[NicoModerator]

Hi There,

Thanks for writing in.

In this case, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[pmuilenburgParticipant]

This reply has been marked as private.

[RahulModerator]

Hey There,

Thanks for writing in!

Unfortunately, we’re can’t access your site. Shows Internal Server Error. See attached!

[pmuilenburgParticipant]

Hi Rahul,

Strange… when I Control-Click on the link it just takes me to my site. Don’t understand what’s going wrong here. Can you please try again?

Thanks

[Rue NelModerator]

Hello There,

Thanks for updating in! Your JS code once worked before but then there was an update of the tab element and that is the reason why it is not longer working. To resolve it, please check out this thread: https://community.theme.co/forums/topic/jvs-for-tabs-links-stopped-working/#post-864178

Hope this helps.

[pmuilenburgParticipant]

Thanks for the link. Tried that, doesn’t work unfortunately.

The page refreshes but doesn’t jump to the right tab

Anything I’m missing here?

Thanks

[Rue NelModerator]

Hello There,

Thanks for the updates! If you want to link and open a tab, your links should be this:
https://www.pm-fotografie.nl/particulier/pasfoto/#tab-1
https://www.pm-fotografie.nl/particulier/pasfoto/#tab-2
https://www.pm-fotografie.nl/particulier/pasfoto/#tab-3

By the way, I noticed that there is a JS error on the page. This might be coming from a 3rd party plugin. You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Please let us know how it goes.

[pmuilenburgParticipant]

Back again :(. Changed the links to the suggested setup. Still doesn’t work. Only error I found is:

“Uncaught TypeError: Cannot read property ‘top’ of undefined
at (index):1253″

Which goes to this:

var yloc = $(‘.x-tab-content [data-cs-tab-index=”‘ + tabnav + ‘”]’).offset().top;
console.log($(‘.x-tab-content [data-cs-tab-index=”‘ + tabnav + ‘”]’).offset().top);
console.log(‘tab: ‘ + tabnav + ‘, yloc: ‘ + yloc);

this is part of the code I copied here?

So alas no luck in solving this little puzzle yet 🙁

Hope you can help further… Thanks

[Nabeel AModerator]

Hi again,

Please make sure you’re using the following links:

https://www.pm-fotografie.nl/particulier/pasfoto/#tab-1
https://www.pm-fotografie.nl/particulier/pasfoto/#tab-2
https://www.pm-fotografie.nl/particulier/pasfoto/#tab-3

I checked the links by pasting the links in browser and they are working just fine. Can you please share the page URL where you’re using these links so we can take a look?

Thanks!

[pmuilenburgParticipant]

Thanks again ;).

The page is: https://www.pm-fotografie.nl/particulier/pasfoto

I see the page name change after you click the link, but the page doesn’t change to the correct tab. Maybe because it is on the same page?

Hope this helps towards the final step 🙂

[Nabeel AModerator]

Hi again,

Thank you for the details. You are right, since it was on the same page that’s why it wasn’t working. I changed your link to #tab-3 and given it a class open-tab then added the following code in your Customizer:

jQuery( function($) {
	$('.open-tab').on('click', function( e ) {
		e.preventDefault();
		e.stopPropagation();
		var tab_index = $(this).attr('href').split("-")[1];
		$( 'a[data-cs-tab-toggle="' + tab_index + '"]' ).click();
		$('html, body').stop().animate( { scrollTop : $( 'a[data-cs-tab-toggle="' + tab_index + '"]' ).offset().top - 80 } );
	});
});

It’s working fine now. I’ve done this for two links “Vergeet niet een afspraak” and “Maak direct een afspraak” in your first tab, you can follow the same procedure for other links as well.

Don’t forget to clear your browser’s cache. Cheers!

[pmuilenburgParticipant]

Thanks so much, it is working now! I’m looking at the other pages to set everyting right. Unfortunately the servers went down last week with my provider, so it took a bit more time to get around to this.

Thanks again for your help and this (still) great theme!

[ChristopherModerator]

You are welcome.

[Author]

Posts