Next buttons to flick to next tab nav item

[hyperdrive_boom]

Good morning,

within a page that I am currently building I have set up the shortcode tab_navs - this is because the site uses Learndash for some of its pages and doesnt allow cornerstone.

With the following set up the tabs work fine:

[tab_nav type="three-up"][tab_nav_item title="First Title" active="true"][tab_nav_item title="Second Title" active=""][tab_nav_item title="Third Title" active=""][/tab_nav][tabs][tab active="true"]

These tabs are at the top of page. However these pages can be quite big and I do not want the user to scroll all the way back up to flick tabs. Is there a way to have a next button that when clicked that would flick to the next one for them?

Guess it would be a shortcode button:

[button type="real" shape="square" size="large" href="#example" title="Example"]Square Button[/button]

But then what?

Login details and page itself in secure note

Thank you

[thai]

Hey There,

That is technically possible. However, that would fall beyond the scope of our support since it would require custom development.

Thank you for understanding.

[hyperdrive_boom]

Thank you for the reply - any pointers? I tried adding just the ID of the next tab (#x-legacy-tab-2) but it just slid the page back up the tabs rather than opening the next one

[Alaa]

Hi @hyperdrive_boom

I’ll put you on the track, here you are what I suggest:

• Running this code in JavaScript is enough to initiate the click event on any of the three tabs:
  jQuery('.x-legacy-tab-2').trigger(click); this will will trigger click on the second tab.

• So, you need to write a code that will run the previous code when your button is click, this could be like that:

jQuery( '.button-class-name' ).on('click', function() {
  jQuery('.x-legacy-tab-2').trigger(click);
});

• Of course this should be wrapped in jQuery document ready event, so your code be like:

jQuery( document ).ready(function() {
		jQuery( '.button-class-name' ).on('click', function() {
			jQuery('.x-legacy-tab-2').trigger(click);
	});
});

I hope you find this helpful, as this is all custom development, regretfully we wont be able to assist further. Custom development is outside the scope of our support. Were happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation. And moreover, this solution may not work after several updates especially if the themes structure changed or overridden.

Thanks.

[hyperdrive_boom]

Good morning @Alaa and thank you so much for the tip - this has set me off in the perfect direction - thank you!

[christian]

You’re welcome. Glad we could help.