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

Additional Pages

Magic Tabs documentation

Getting Started
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…
Read more...
Advanced Settings
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…
Read more...
Tabs and Layouts
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…
Read more...
Accordions
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.
Read more...
Global Settings
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…
Read more...
Jump and Linking to Specific Tabs
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.
Read more...
Auto Play
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…
Read more...
Splitting a Form into Tabs
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,…
Read more...
Form to Magic Tabs block details
Details of how the Form to Magic Tabs block is used to split a form into tabs.
Read more...
Splitting a Page List to an Accordion
Details of how the Form to Magic Tabs block is used to split a a page list into an accordion or tabs
Read more...
Tabs and AJAX
AJAX loading sets of tabs and AJAX loading content within a tab.
Read more...
No Tabs
Magic tabs without the tabs!
Read more...
Developing Tab Templates
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.
Read more...
Problem Solving
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.
Read more...
Developer Interfaces
Magic Tabs provides JavaScript events and a php interface for developers to integrate to tabs.
Read more...
Version History
Version history for Magic Tabs.
Read more...