Opens in a new tab

Tabs and Accordion

Adds a responsive accordion mode to the native Bricks Tabs (Nestable) element. Pick the breakpoint, and the same tabs turn into a single-open accordion at that width and below. Resize your browser to see it.

Text tabs, accordion at tablet portrait

Switches to an accordion at 991px and below. One panel is always kept open.

Overview content. A short paragraph so the panel has some height to animate.

Second paragraph of overview content.

Itinerary content goes here, with enough text to be visible.

Practical information content goes here.

Another line.

Custom breakpoint, starts closed

A custom 700px breakpoint. In accordion mode every panel starts closed and clicking the open panel closes it.

Alpha content.

Beta content.

Icon tabs

Icon above the label as tabs. In accordion mode the icon sits before the heading.

Overview content with icon tabs.

Itinerary content.

Practical information content.

Gallery content.

Settings

Select a Tabs (Nestable) element and open the Accordion group. Choose a Bricks breakpoint, a custom width or Always; set what is open on load, whether one panel must stay open, the slide animation and the chevron indicator. Tab styling is untouched, so existing Title and Content controls still apply.