Global Settings

Global settings apply to all Magic Tabs blocks, not just the block being edited and are for settings that govern how Magic Tabs behaves site wide! 

Global settings can be edited directly from the Magic Tabs block edit dialog under Edit Block > Global​​​.

Quick Add

Edit Block > Global Settings > Quick add:

  • Quick Add. When a new Magic Tabs block is added, a block with no settings will be placed directly with no further edit dialog.
  • Full Add Dialog.  When a new Magic Tabs block is added, the full Edit Block dialog will be opened  (default).

Quick Add can save time when you have long sets of tabs to build. You can quickly drag a new Magic Tabs block between other blocks without needing to go through the Block Edit > Save dialog and let the Magic Tabs block get the tab title from the following content.

You can then go back and Block Edit > .... > Save the first tab to configure the other options for the tab set.

You can see Quick Add in action in the Tabs in 90 Seconds video.

How Accordions Behave

This behaviour is only available for accordions and has no affect when tabs are rendered.

Edit Block > Global Settings > Accordion initial state:

  • Accordion initially open. Accordions are rendered with a section initially open.
  • Accordion initially closed.  Accordions are rendered with all sections initially closed (default).

Edit Block > Global Settings > Accordion always open:

  • May be fully closed. A section can close itself, so no accordion sections are open (default).
  • Always one section open. A section cannot close itself, so there will always be one section open.

When 'May be fully closed' is selected, an accordion with just one section can be used to implement a simple expander.

Theme Grid

Theme Grid settings govern how theme grid elements are processed when rendering Magic Tabs. You may need to experiment with these settings if tabs (and particularly vertical tabs or accordions) are not laying out cleanly. 

Edit Block > Global Settings > Preserve theme grid wrapper on tab elements:

  • Preserve grid wrapper. Any theme grid elements wrapping tab and tab end blocks are retained (default).
  • Remove grid wrapper.  Any theme grid elements wrapping tab and tab end blocks are removed.

Edit Block > Global Settings > Classes that will be removed from elements contained within tabs:

This is a text entry and contains a space separated list for one or more classes to remove. The elements will be retained, just classes removed from them. This can be used to clear particularly bossy classes that distort rendering of blocks within tabs. For example, on bootstrap based themes, the class 'container' may need to be removed and is provided as a default value for this setting.

Edit Block > Global Settings > Wrap entire tab set in any theme grid box:

  • Do not wrap in theme grid. No action (default)
  • Wrap in theme grid. Theme grid elements are copied and used to place a wrapper about the entire tab set.

The default settings for these three inputs are "Preserve grid wrapper", "container" and "Do not wrap in theme grid". The most likely alternative is to set both "Remove" and "Wrap". 

The information box in the block edit dialog will show the current theme grid settings. For example, the Elemental theme uses Twitter Bootstrap and implements container <div class="container"> and row <div class="row">.

Mobile Devices

Sometimes the processing overhead of transitions, particularly more complex effects, can be overwhelming for the small processors on mobile devices. Animated transitions between tabs can be disabled on mobile devices.

Edit Block > Global Settings > Show transitions on mobile devices

  • Transitions on mobile. Transitions will be animated on mobile devices (default).
  • No Transitions on mobile. On mobile devices, transitions will be substituted for a simple show/hide of tabbed content.

Hidden Blocks

Elements hidden by block or area design display:none or class magic-tabs-hide can be automatically shown when the tab set is rendered. Use this to hide a flash of un-styled content until tabs are ready.

Edit Block > Global Settings > Show blocks hidden by block design:

  • Show hidden blocks. When the tab set is rendered, magic-tabs-hide classes are removed and blocks hidden by display:none are shown.
  • Leave unchanged. Blocks show/hide settings and left unchanged.

Sometimes as a page is rendered it can briefly show as a list of headings and content before these are rearranged into Magic Tabs. If you don't want that behaviour, the easiest fix is to add a magic-tabs-hide class to the containing area in Edit Area Design > Advanced (cod) > Custom Class and then set Edit Block > Global Settings > Show blocks hidden by block design to Show hidden blocks.

The entire area will then be hidden until Magic Tabs has rendred the tabs and shown once fully rendered as a set of tabs.

Exclusive Tab Handlers

Some jQuery plugins pulled into themes, such as Smooth Scroll, may greedily attach themselves to the click events of Magic Tabs headings and consequently block tabs from changing. Selecting Exclusive is not foolproof, but can help get round such issues. 

Edit Block > Global Settings > Show blocks hidden by block design:

  • Make Exclusive. Magic Tabs will attempt to clear click event handlers attached to tab headings by other scripts and replace them exclusively with Magic Tabs own tab handlers
  • Allow other handlers. Magic tabs will not do anything to interfere with other click event handlers (default).

As noted above, Selecting Make Exclusive is not foolproof. A lot depends on how greedily the interfering script attaches itself to href #fragments and the order in which scripts are loaded. It may be that you need to fix the configuration of the interfering script. Please see Problem Solving.

This Example

This example uses a set of tabs with a Bootstrap 3 Themes Only template to pick up tab styling from the site theme with transitions set to fold up/down at a 400ms speed. Whilst the template says Bootstrap 3 only, it continues to work well with later Bootstrap releases and many think it actually looks more tab like than the default Bootstrap 5 tabs!

The Accordion responsive threshold is set to 700px.