Linking to Specific Tabs

From other pages

When linking to a Magic Tabs page from another page, you can append a URL parameter tab=tab_identity to the url in any link to the page. You can easily see the full URL by enabling tab history in the advanced tab settings for the opening Magic Tabs block on the page you are linking to.

For example, you can code a link using an absolute URL for the next tab on this page using

Within a page

If you click the link Within a page, this page will be reloaded and the tab about linking Within a page will be opened.

Magic Tabs will also pick up the #fragment part of a URL as #tab_identity. However, in many situations concrete5 will strip the #tab_identity from the path, so its usually more reliable to use the ?tab=tab_identity.

Within a page

Magic Tabs will also detect the parameter 'tab' from a Post request, so you can create an html form to link to a specific tab when the form submission is posted.

Within a page

To link to a Magic tab within a page, you don't need the full URL as used to link 'from other pages'. You can insert a link tag that will simply open a Magic Tab within the current page.

For example, you can code a link to open the next tab within this page using:

Jump block

If you click the link Jump block, the tab will be opened within the page, without reloading the page.

Jump block

You can also link to tabs within a page using the Magic Tabs Jump block. (As an aside, the following shows a set of Magic Tabs nested within this tab)

Named tabs

In a Magic Tabs Jump block, the equivalent of the directly coded link is the GoTo tab behaviour.

GoTo a tab requires you to identify the target tab. To identify a specific tab you can provide any of:

  • An #id for the tab.
  • The label of the tab.

For example, the following button is provided by a Magic Tabs Jump block and opens the Special behaviours tab.

Magiuc Tabs Jump1.png

Special behaviour

The Magic Tabs Jump block also provides a selection of special behaviours to open tabs relatively and absolutely by context within a set of Magic tabs.

  • Previous
  • Next
  • Previous & Cycle
  • Next & Cycle
  • First
  • Last

With these behaviours you don't need to identify a specific tab, they work it out for you.

The plain links below uses the special behaviours 'Previous' and 'Next' assigned the provided custom template 'Plain Link' and will take you to the previous or next tabs in this set.

Previous Next

Easy matching

GoTo a tab requires a target. For other actions, if you only have one set of Magic Tabs on the page or if the Magic Tabs Jump is immediately within the target tab set, you can usually leave the target blank and Magic Tabs will sort it out for you.

To identify a specific tab for a Goto you can provide any of:

  • An #id for the tab.
  • The label (name) of the tab.

To identify a tab set you can provide any of:

  • An #id for the tab set.
  • An #id for any tab in the set.
  • The label (name) of any tab in the tab set.

Tab labels are weakly matched by comparing only alphanumeric characters and ignoring case. If a weak match can be made to more that one tab in a page, the first tab will be opened. If that is not the behaviour you want, you will need to specify an #id.

Limitations

Magic Tabs will only process one tab parameter in the request URL or Post data. So on a page containing multiple sets of tabs, you can only link in to one tab in one tab set.

concrete5 often strips the #fragment part of a URL, so it is inadvisable to make an external link into a tab using a #fragment to specify a tab. Use the ?tab= URL parameter instead.

URL linking and internal linking to tabs can be disabled globally by specifying the config/site parameter JL_MAGIC_TABS_ENABLE_TAB_URL to 'off'. The default value is 'on'.

The URL ?tab= parameter only works with pretty URLs. When an edited page is saved or when pretty URLs is not enabled or in any other situation where the page is identified by /index.php?cID=nn, then the ?tab= parameter assigned by tab history will be applied to /index.php and take the browser to the site's home page!

 

Last updated: over a year ago