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. 

Tabs render as simple headings

Each tab is initially rendered as a simple HTML <h2>, <h3>or <h4> element, where the value of n depends on the level of the tab, the tab template and how you have Magic Tabs configured.

You may see this briefly while a page loads. Then the Magic Tabs JavaScript does its stuff and transforms these headings and their content into beautiful tabs.

If you continue to see headings, here are some things that could be wrong:

Tabs do not operate in edit mode

Magic Tabs transforms a page as it completes loading.

In edit mode and on dashboard pages the tabs are disabled and a marker shown in their place, so you will see all tabs and their content strung out down the page. 

When  the page is saved and published, the Magic Tabs JavaScript is loaded and transforms the page to tabs as it completes loading into the visitors browser.

Transition while a page loads

Magic Tabs transforms a page as it completes loading. For a large or complex page, this means you may briefly see content without the tabs while the page loads.

If you want to hide this, use block Design (Set Block Styles) > CSS >Additional CSS to add “display:none;” to any blocks (including Magic Tabs blocks) you want to remain hidden until everything is ready. Magic Tabs will then show the hidden blocks and tabs when everything has loaded.

For versions of concrete5 that do not provide adding styles directly in Block Design, from Magic Tabs v7.1.2 (for c5.7 and c5v8), Magic Tabs provides the class 'magic-tabs-hide'. You can apply 'magic-tabs-hide' in block or area design.

  • Applied in block design, 'magic-tabs-hide' hides a block when not in edit mode and is removed when tab sets are ready.
  • 'magic-tabs-hide' can also be applied in area design, so hiding an entire area while tabs are rendered and so avoiding the need to add to block design for individual tabs and their content. This can be convenient if a tab set fills an entire area.

A tab set needs to be within an area

Some important points to bear in mind:

  1. Tab sets cannot go across the boundaries to an area.
  2. There must be at least 2 tabs in a set.
  3. Each tab needs to contain one or more blocks.
  4. In concrete 5.6 and before, each part of a layout is effectively a separate concrete5 area, so you can have tabs within cells of a layout, but not layouts within a tab.

Each tab must wrap one or more blocks

Here is a simple example of sequence of blocks within an area. You can have other blocks before and after, but this sequence of wrapping what you want within each tab with Magic Tabs blocks is the essential part:

  1. Magic Tabs Block 'Tab A'
  2. One or more blocks in tab A
  3. Magic Tabs Block 'Tab B'
  4. One or more blocks in tab B
  5. Magic Tabs Block 'Tab C'
  6. One or more blocks in tab C
  7. Magic Tabs End

The above will then show as a Tabs A, B and C. Clicking each will show the associated tab content.

In most cases, if a set of tabs does not follow the above structure or is incomplete, Magic Tabs will leave it as simple headings.

Layouts give unexpected results

Each cell within a layout is rendered as a psudo-area.

In concrete5.6 and before, this means that a set of Magic Tabs cannot span across cells in a layout. A Tab Set must be completely contained within an area.

For users familiar with other (less advanced) tab addons that depended on layouts, this can be initially confusing because the layout based tabs of the other addons will not map directly into Magic Tabs. The blocks need to be moved so the Magic Tabs blocks and their content are organised linearly within a single page area, or a single layout cell within a page area.

In concrete5.7 the same advice applies. However, because of the way concrete5.7 uses the theme grid model to build layouts, in some cases Magic Tabs groups will work across layout cells. But please do not rely on that. As the theme grid changes responsively with different display sizes, the layout could re-arrange tab content with it. So a happenstance of Magic Tabs initially rendering nicely across layout cells could be wrong at other responsive sizes.

For concrete5.6 or concrete5.7, Magic Tabs blocks and their associated content should be placed linearly within a single page area, or a single layout cell within a page area. The responsive threshold in the Magic Tabs edit dialog should be used to control the screen size below which tabs are rendered as accordions.

Broken HTML can prevent tabs rendering

An html error on a page can confuse a browser about the page structure and either prevent concrete5 from completely rendering a page or confuse JavaScript on the page from selecting the correct page elements.

This can cause bigger problems than just preventing Magic Tabs from doing its stuff. Other addons can be affected and the concrete5 dashboard bar at the top of the page can be prevented from showing fully.

If a page is completely broken, you should still be able to get to the site dashboard by entering the dashboard URL directly http://www.yoursite.com/index.php/dashboard/.

Some tests to make:

  1. If you are developing custom block templates, swap to one of the supplied block templates, both for Magic Tabs and other blocks on the page.
  2. Change the page or complete site to a default theme. This is an especially important diagnostic check if you are developing a custom theme. You won't loose any work; areas that are not in the default theme are retained and will reappear when you swap back to your custom theme.

More general information can be found in The block does not work!

Your browser developer console may also be of use here; the Log tab can sometimes provide diagnostics about broken HTML.

Broken JavaScript can prevent tabs rendering

A JavaScript error on a page or in a theme can prevent other JavaScript from running. As with HTML errors, this can cause bigger problems than just preventing Magic Tabs from doing its stuff and can prevent other addons from working, interfere with the dashboard bar at the top of the page and even prevent a page from being edited.

Your browser developer console will always log JavaScript errors. This is often the quickest way to find out if a problem stems from JavaScript or from HTML.

As with HTML errors, if a page is completely broken, you should still be able to get to the dashboard by entering the dashboard URL directly http://www.yoursite.com/index.php/dashboard/ and revert the page version, change the theme or uninstall a problem addon.

You can take the same steps as with HTML errors, but first:

  1. If you have recently upgraded Magic Tabs, try refreshing the page a few times with F5 and CTL-F5. Sometimes a browser cache can take its time to load an update to a JavaScript file, so leaving it out of step with the update. This would normally sort itself out in an hour or so anyway when your browser periodically reloads the cached file, but a forced reload can help things along.
  2. If you are developing custom block templates, swap to one of the supplied block templates, both for Magic Tabs and other blocks on the page.
  3. Change the page or complete site to a default theme. This is an especially important diagnostic check if you are developing a custom theme. You won't loose any work; areas that are not in the default theme are retained and will reappear when you swap back to your custom theme.

More general information can be found in The block does not work!

 

Vertical Tabs or Accordions not rendering cleanly

On later concrete5.7+ versions, the way blocks are wrapped on full width page types can interfere with the way Magic Tabs are rendered for Vertical templates and nested accordions.

To allow this rendering problem to be corrected, from v7.1+ Magic Tabs provides some global settings that can be adjusted to alter the way the grid box model is transformed when Magic Tabs are rendered. See Global Settings in Magic Tabs v7.1+.

Problems immediately after updating

Sometimes you could update Magic Tabs with a new version and the tabs stop working or otherwise break.

The first thing to do is read the release notes - ideally before updating. While I try to avoid incompatible updates, occasionally improved functionality, new features or a bug fix can have consequences for tab settings or custom templates.

Another possibility is cached versions of files getting out of step. So clear all the concrete5 caches and see if that helps.

Its not just the concrete5 caches that can get out of step. Sometimes a browser cache can take its time to load an update to a JavaScript or CSS file, so leaving it behind the new version of Magic Tabs. This can be particularly lingering if you have implemented Apache mod_expires. 

A browser cache will normally sort itself out in an hour or so anyway when your browser periodically reloads the cached file, but a forced reload can help things along, so try refreshing the page a few times with F5 and CTL-F5. See Broken JavaScript can prevent tabs rendering.

Getting further help

If you need further help, please open a support request by clicking 'Get Help' on the addon page on concrete5.org.

Concrete 5.6Get help for Magic Tabs on concrete5.6.

Concrete 5.7Get help for Magic Tabs on concrete5.7+.

Further documentation

There is much more you can do with Magic Tabs. Have a look through these pages for examples, ideas and detailed documentation.

Last updated: 3 months ago