Jump and Linking to Specific Tabs

Jump to Magic Tab block

A Jump to Magic Tab block can be used to jump to a tab within a page, but not to other pages.

A Jump to Magic Tab block can be placed anywhere on a page, including within any tab, immediately above or below a set of tabs or even in another area of the page. It can be configured to jump to a specific tab or more generally to jump to the previous or next tab.

 

Jumping to Specific Tabs

Edit Block > Action for the button = GoTo

Edit Block > Label for the button, A text field where you can enter any label.

Edit Block > Action for the button > Target tab or set can be set to any of:

  • The #href in the tab control
  • The text/label in the tab control

Jumping to the First or Last tab

Edit Block > Action for the button = 'First' or 'Last'.

Edit Block > Label for the button, A text field where you can enter any label.

Edit Block > Action for the button > Target tab or set can be set to any of:

  • Left empty, if there is only one set of tabs on the page or for the tabs containing the block or the first set of tabs on a page.
  • The #id or class of the tab set, as seen in the wrapping element for the tab controls.
  • An #id or tab control href for any tab in the set.
  • The text/label in the tab control for any tab in the set.

Jumping to the Previous or Next tab

These options jump to a tab relative to the currently active tab.

Edit Block > Action for the button = 'Previous' , 'Next' , 'Previous & Cycle' , 'Next' & Cycle or 'Previous|Next'

Edit Block > Label for the button, A text field where you can enter any label. When Previous|Next is selected, this should be a pair of labels separated by a '|' pipe.

Edit Block > Action for the button > Target tab or set can be set to any of:

  • Left empty, if there is only one set of tabs on the page or for the tabs containing the block or the first set of tabs on a page.
  • The #id or class of the tab set, as seen in the wrapping element for the tab controls.
  • An #id or tab control href for any tab in the set.
  • The text/label in the tab control for any tab in the set.

Within  'Previous' , 'Next'  and 'Previous|Next', a further option Edit Block > Hide button when not relevant can be checked and the control will be hidden when it would jump to the currently active tab.

Linking Within a Page

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

For example, you can code a link to open the tab about Jump to a Magic Tab within this page using:

<a class="jl_magic_tabs_link_to_tab" href="#jl_magic_tabs__gix1">Magic Tabs Jump</a>

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

Linking to Tabs on Another Page

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. If you don't already know it, 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 first tab on this page using

<a href="https://c5magic.co.uk/addons/magic-tabs/jump-and-linking-specific-tabs?tab=jl_magic_tabs__gix1">reload page with another tab</a>

If you click the external link reload page with another tab, this page will be reloaded as if it were another page 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.

<a href="https://c5magic.co.uk/addons/magic-tabs/jump-and-linking-specific-tabs#jl_magic_tabs__gix5">reload page with another tab</a>

A browser will also scroll a page based on a #tab_identity before Magic Tabs arranges the page into tabs. This can result in a disjointed scroll with respect to the tab just opened. Hence another good reason to use ?tab=tab_identity in the query string.

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.

Linking to Accordions

Linking to accordions on another page is similar to linking to tabs. However, if you have the option global/accordion initial state set to Accordion Initially closed,  you won't see the accordion section linked to automatically open itself when you visit the page.

To link to an accordion section on another page and have it open automatically,  global/accordion initial state needs to be set to Accordion Initially open so that Magic Tabs will allow the accordion to have an open section when the page is visited.

Whilst this is a global option, if you need to have it set on some pages and clear on other pages, you can set the option in a template. See Developer Interfaces / Overriding Global Settings.

 

This Example

This example uses a set of tabs with the OK to Primary template to use the Bootstrap button styling of the site theme with transitions set to slide up/down at a 400ms speed.

Within the tab for the Jump to Magic Tab block, a nested set of tabs use the Bootstrap 3 themes only template set to fade in/out at a speed of 400ms.

The Accordion responsive threshold is set to 700px for both the outer and nested tabs..

Additional Pages