LB Tabs & Accordion

Content editors often need to present related content compactly — FAQ answers, product specs, a series of related blocks — without stacking them all down a long page. LB Tabs & Accordion adds a Layout Builder section that does exactly that: content is split into labelled sub-sections visitors switch between as tabs, or expand one at a time as an accordion. Each sub-section is a regular Layout Builder region, so editors can place any number of blocks into it, exactly as in any other Layout Builder region.

It is a deliberately small module: it has no style options at all (no color, spacing, typography, or free-form HTML attributes). Visual styling is left entirely to UI Styles or to the active theme.

Features

• One Layout plugin, two display modes (tabs or accordion), picked per section.
• Each sub-section is a normal Layout Builder region: any number of blocks, stacked vertically.
• Reordering sub-sections uses Drupal core's standard #tabledrag widget — no custom JavaScript for the admin UI.
• Markup follows the WAI-ARIA Authoring Practices Guide (role="tablist"/tab/tabpanel, roving tabindex, aria-expanded), checked for consistency against the French government design system's (DSFR) components without depending on any DSFR code.
• Tabs and accordion are each their own Single Directory Component (components/tabs, components/accordion): CSS/JS is loaded only for the display mode actually used, and either one can be overridden independently by a theme via a "replaces:" component, without touching this module.
• No third-party CSS framework coupling, no vendored JS/CSS libraries. Works on any theme.

Post-Installation

1. Enable Layout Builder on the content type or view mode you want to edit.
2. On "Manage layout", click "Add section" and choose "Tabs / Accordion".
3. Pick a display mode, a number of sub-sections (1 to 10), label each one, drag rows to reorder, save.
4. Click "Add block" inside any sub-section like any other Layout Builder region.

There is no separate settings form: everything lives in the section's own configuration.

Additional Requirements

Drupal core's Layout Builder module only. No contributed module dependencies.

Recommended modules/libraries

• UI Styles, with its ui_styles_layout_builder sub-module enabled: adds CSS class pickers to the section and to each sub-section, with no code required in this module.
• Layout Builder Restrictions, if you want to limit which block types editors may place in a given sub-section.