Accordions

Showing an Accordion

Rendering a set of tabs as an accordion is governed by the edit dialog of the first Magic Tabs block in a set of tabs by setting Edit Block > Advanced > Accordion responsive threshold. When a screen or browser window is smaller than the configured threshold, Magic Tabs will translate the tabbed sections into an accordion rather than the usual set of tabs.

This can be used to create a set of tabs that will render as tabs on large screens and as accordions on small screens such as mobile phones. Simply set the threshold to the width below which you want Magic Tabs to render an accordion.

To render a set of tabs as an accordion for large screens, simply set the Accordion responsive thresholdto an arbitrarily big number such as 10,000. This will be bigger than any browser window and the responsive adjustment in Magic Tabs will always render the tab set as an accordion.

As with many Magic Tabs settings, you only set the Accordion responsive threshold for the first Magic Tabs block in a set of tabs.

Accordion Transitions

You can set Edit Block > Accordion Transitions seperately to regular tab Edit Block > Transitions. When an Accordion responsive threshold is configured, the Magic Tabs edit dialog will show an additional tab for Accordion Transitions.

The most natural transition to use with an accordion is a simple slide up/down, as used on this page. Its what users have come to expect. Nevertheless, the entire suite of transitions provided with Magic Tabs are available for use with accordions, so if you are feeling adventurous, you can experiment with some unusual effects.

As with many Magic Tabs settings, you only set Accordion Transitions for the first Magic Tabs block in a set of tabs.

Mixing Tabs and Accordions

The Accordion responsive threshold is set separately for each individual tab set, so you can mix accordion formatted tabs, horizontal tab sets and vertical tab sets on the same page and even nested inside one another.

You can see the Magic Tabs Jump block in use as a set of Previous/Next buttons above this accordion.

Accordion Icons

Accordion Icons

By default, accordions are rendered using +/- icons defined by the tab template. When you add accordion icons in Edit Block > Icons > Accordions, those icons may be configured to replace the default icons for just that one accordion template by choosing an Edit Block > Icons > Accordions > Icon position with 'no default icon'.

When you set up icons, you may also want to enter a tab heading in Edit Block > Basic > Tab Heading. If you don't, you can have an icon without a heading. Perhaps that is what you want!

In the edit dialog, icons are set independantly for each tab. Any Magic Tabs block where you do not set an icon will use the default icons of the block template. Icons can be set up globally for a template by creating a custom template with alternative icons coded into the template.

An accordion icon has been set just for this accordion section. Other accordion sections in this set have the default +/- icon while this section has a folder icon.

Accordion Templates

The default view template and all the custom templates supplied with Magic Tabs, including vertical tabs, are capable of showing as accordions. This accordion uses the Self Contained Starter block template.

In the view.css, horizontal tab templates are made to look like accordions by repeating a single tab template for each accordion header. When the parent has an .jl_magic_tabs_accordion selector, CSS is used to stretch the tab to the width of the accordion and append the +/- icons to the right.

By default Edit Block > Global > Accordion always open is set to 'May be fully closed', To facilitate this, the other small CSS adjustment in the block template is to show a pointer cursor over an open accordion heading to indicate it can be clicked to close. Should you configure Magic Tabs Edit Block > Global > Accordion always open to 'Always one section open', that is the line of CSS you may want to remove.

Vertical tab templates are a little more difficult to reconfigure as an accordion. For these, much of the corresponding horizontal tab template also needs to be incorporated into the .jl_magic_tabs_accordion selector.

Limitations

The decision to render as tabs or accordion is made once when a page is loaded. Once rendered, this does not change as the browser window is resized.

This Example

This example uses a set of tabs with the Self Contained Starter template with transitions set slide up/down at a 600ms speed.

The Accordion responsive threshold is set to 10,000px so the tab set will always render as an accordion.

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…