Skip Navigation

[Resolved] Page with Tabs Layout – go to a specific tab directly, can this be done?

This support ticket is created 3 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 6 replies, has 2 voices.

Last updated by Christian Cox 3 years, 9 months ago.

Assisted by: Christian Cox.

Author
Posts
#1693071

Tell us what you are trying to do?

We have a layout with three tabs. For example, Meeting Overview, Meeting Agenda, Meeting Minutes. In some cases, we want to direct users to Meeting Agenda tab directly, but since a layout is used in a page, and there is only one URL for page, the default tab would always be the one you set it to be. Is it possible to provide user something like URL+tab-name so that user can go to that tab?

Thank you.
Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?

#1693381

Hello, unfortunately there is nothing built-in to the system that will load a specific Layout tab panel when the page loads, based on a URL parameter. That would require custom JavaScript code. Another ticket here in the forum includes a custom code example that may help achieve a similar effect: https://toolset.com/de/forums/topic/link-to-a-specific-tab/

If you are comfortable writing JavaScript, you may be able to analyze this code to see how it works, and customize it to apply to your own unique use case. That type of customization is outside the scope of support we provide here in the forums, and may require the assistance of a professional developer.

#1714167

Hi, we found the sample code you pointed out, and it was helpful - a tab now can be selected when URL site/#tab_name is launched. However, at this point, if user toggles between tabs, the URL doesn't get changed so it is a bit confusing. Is it possible to change URL when a tab is clicked?

Example below, a page with 4 tabs.
mysite.com/#tab1
mysite.com/#tab2
mysite.com/#tab3
mysite.com/#tab4

when clicking tab2, URL changes to mysite.com/#tab2

Thank you!

#1714169

Hi, we found the sample code you pointed out, and it was helpful - a tab now can be selected when URL site/#tab_name is launched. However, at this point, if user toggles between tabs, the URL doesn't get changed so it is a bit confusing. Is it possible to change URL when a tab is clicked?

Example below, a page with 4 tabs.
mysite.com/#tab1
mysite.com/#tab2
mysite.com/#tab3
mysite.com/#tab4

when clicking tab2, URL changes to mysite.com/#tab2

Thank you!

#1714829

This would require custom code and unfortunately I don't have a cut-and-paste solution available for you.

#1714879

Thank you for your response. Is the documentation the right place for us to look for the info adding custom code for such a functionality? Thank you.

#1716687

Unfortunately I think not, there is no documented JavaScript API for the tabs so there's nothing really helpful in the documentation that will explain how to add event listeners like this. You would need to use custom JavaScript event listeners. jQuery's on, for example, might be helpful for adding delegate click listeners. Otherwise, standard JavaScript addEventListener can be used to listen for click events. Then you could use the browser history API to update the URL, and support the back and forward buttons as needed. Documentation for those:
https://api.jquery.com/on/
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/History_API

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.