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.

Showing an Accordion

Rendering a set of tabs as an accordion is governed by the Responsive Threshold setting. 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.

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

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.

Mixing Tabs and Accordions

The 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 also use the supporting Magic Tabs Jump and Magic Tabs Auto Play blocks with accordions. The 'Open Previous' and 'Open Next' buttons above are Magic Tabs Jump blocks set for 'Previous and Cycle' and 'Next and Cycle'

Accordion Templates

The default view template and all the custom templates supplied with Magic Tabs, including vertical tabs, are capable of showing as accordions.

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 +/- markers to the right.

The other small CSS adjustment is to show a pointer cursor over an open accordion heading to indicate it can be clicked to close. Should you configure Magic Tabs to always have one accordion section open, that is the line of CSS you will need 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 repeated with the .jl_magic_tabs_accordion selector.


Making a template originally designed to show tabs work with an accordion works reasonably well with most templates.

Such an approach is however limited with jQuery.UI formatted tab templates.  jQuery.UI tab and accordion markup differs greatly, so it is not possible to make tab templates generated through jQuery.UI themes look like the corresponding jQuery.UI theme's accordion widget. The differences in HTML markup are just too great.

Instead, the accordion markup for jQuery.UI based tabs within Magic Tabs, is limited to stretching the tab width and adding +/- markers.

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. 

Last updated: over a year ago