Jump and Linking to Specific Tabs

Jump to Magic Tab block

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

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://demo.c5magic.co.uk/addons/magic-tabs/jump-and-linking-specific-tabs?tab=jl_magic_tabs__gix5">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://demo.c5magic.co.uk/addons/magic-tabs/jump-and-linking-specific-tabs#jl_magic_tabs__gix5">reload page with another tab</a>

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.

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..

Magic Tabs documentation

To help you get started with Magic Tabs, this Getting Started page is built as a series of Magic Tabs with content and other blocks between. You can…
To use Magic Tabs for a straight forward set of tabs, you only need enter a Tab Heading and save the edit dialog. Magic Tabs takes care of everything…
You can create a set of tabs wholly within a single layout cell. You can create a layout wholly within a tab. The important consideration is that the…
This set of Magic Tabs is configured to always show as an accordion. To read about how it is done, please click to open the first accordion tab.
Global settings can be edited directly from the Magic Tabs block edit dialog. These settings are global and will affect all Magic Tabs blocks on a…
Link within a page using the Magic Tabs Jump block or with an href. Link from other pages with a url ?tab=tab_name parameter.
The Magic Tabs Auto Play block automatically cycles through a set of Magic Tabs. With transitions you can turn a set of Magic Tabs into a simple slide…
The Form to Magic Tabs block can be used to break a form or page list into a series of tabs. It works with forms blocks from Express, Legacy Form,…
Details of how the Form to Magic Tabs block is used to split a form into tabs.
Details of how the Form to Magic Tabs block is used to split a a page list into an accordion or tabs
Magic Tabs comes with many example tab templates. For many sites, one of these will fit in with the site theme with no further modification.
If you start building a page with Magic Tabs and don't see the results you expect, here are some tips to help you solve any problems.
Magic Tabs provides JavaScript events and a php interface for developers to integrate to tabs. If you have the Buttons Factory Pro addon, you can use…