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.

Drupal 11.1.8 or newer (core_version_requirement: ^11.1.8), PHP 8.3 or newer. The module implements its preprocess as an object-oriented hook, and those are supported from Drupal 11.2, or 11.1.8 on the 11.1 branch.

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.

Similar modules

Several modules already bring tabs or accordions to Layout Builder. The point of the table below is to help you pick the right one, not to argue this one is better — they make genuinely different choices. Checked September 2026, against each project's newest branch.

Module Core support One tab / accordion item is… Third-party front-end code LB Tabs & Accordion (this module, 1.0.x) Drupal 11 (^11.1.8) a Layout Builder region, holding any number of blocks; the label is typed into the section form none — a small vanilla-JS behaviour per component, on core/once Layout Builder: Tabs and Accordion (3.0.x) Drupal 9, 10, 11 a block: the module keeps two regions (label_blocks, content_blocks) and the tab label comes either from the block title or from a paired label block jQuery UI, through the contributed jquery_ui_tabs and jquery_ui_accordion modules Layout Builder Accordion (1.x) Drupal 8, 9, 10 — no Drupal 11 branch yet a block, whose title becomes the accordion header jQuery Labelauty, self-hosted, to install under /libraries Accordion for Layout Builder (2.2.x) Drupal 9, 10, 11 a paragraph in a dedicated block type; the module is part of the YMCA Website Services distribution and depends on y_lb and Paragraphs jQuery Layout Kit (8.x-1.x) Drupal 8, 9 — no Drupal 10 or 11 branch yet one of a whole set of layouts: columns, tabs, accordions and a "conmutator" jQuery UI, through jquery_ui_tabs and jquery_ui_accordion

So, in practice:

• Use this module if a tab needs to hold several blocks, you would rather not pull jQuery UI onto the page, and you style your site with UI Styles or your own theme CSS.
• Use lb_tabs if one block per tab suits your content and jQuery UI is not a problem for you. It is the most established module of the group and supports Drupal 9 through 11.
• Use Layout Builder Accordion if you want an accordion with nothing at all to configure, and you are still on Drupal 10 or earlier.
• Use Accordion for Layout Builder if you are running the YMCA Website Services distribution — it is built for it.
• Use Layout Kit if you want columns, tabs and accordions from a single module, and your site is on Drupal 9.