ckeditor_content_groups

Editors often need to present content in expandable sections or tabbed panels inside a rich text field — FAQs, product specifications, step-by-step guides, layered documentation. Drupal core's CKEditor 5 offers no built-in way to do this. The usual workarounds are presentational tables (semantically wrong, inaccessible, broken on mobile), block-level modules that live outside the text field, or custom JavaScript that a developer has to build and maintain.

This module solves that by adding three content-grouping widgets — accordions, horizontal tabs and vertical tabs — directly inside CKEditor 5. Editors insert a widget, add, remove or reorder its items from an inline contextual toolbar, and adjust its behavior from a properties panel — all from within the editor, without touching code or template files. The output is semantic markup (<details>/<summary> for accordions, ARIA tab/tabpanel roles for tabs) rendered with pure CSS, independent of any CSS framework or theme. An optional submodule emits JSON-LD structured data (FAQPage / ItemList) for SEO.

New to Drupal? Think of it this way: normally CKEditor gives you one continuous flow of text. This module lets editors collapse long sections into click-to-open panels, or split content into tabs the reader switches between — like an FAQ that expands one answer at a time — all from inside the editor, without leaving it or asking a developer.

Use it whenever editors need accordions or tabs inside body fields — FAQs, feature comparisons, tabbed specifications, collapsible help — without resorting to layout tables, block-level tab modules, or per-layout custom development.

Features

The module is modular by design: each widget is an independent CKEditor 5 plugin, so you enable only what you need. When an editor inserts a widget, an inline contextual toolbar (balloon) appears with buttons to manage its items and open a properties panel.

Key features include:

• Insert accordions, horizontal tabs and vertical tabs directly inside CKEditor 5, as an accessible alternative to tables or hand-written markup.
• Inline contextual toolbar for each widget: add or remove items/tabs, reorder them (move up/down or left/right), and expand/collapse accordion items — without losing existing content.
• Per-text-format defaults set by site builders, plus optional per-instance overrides: editors can change exposed settings from a Properties panel inside the editor. If a setting is not exposed, it stays locked to the format default and the Properties button hides itself when nothing is editable.
• Accordion options: number of items, initial state (all collapsed / first item open / all expanded), allow multiple items open at once, collapsible active item, open/close animation, and arrow indicator position (left / right / none).
• Tabs options: default active tab, keyboard navigation (arrow keys), tab alignment and minimum panel height; vertical tabs additionally support a minimum tab width and a minimum tab count.
• Semantic, framework-independent output: <details>/<summary> for accordions and ARIA role="tab"/role="tabpanel" for tabs, styled with plain CSS — no Bootstrap, no theme dependency.
• Full accessibility: ARIA attributes, keyboard support (arrow keys, Enter/Space), :focus-visible outlines, and prefers-reduced-motion handling.
• Frontend assets are loaded lazily — the CSS and JS for each widget are attached only on pages whose rendered content actually contains that widget — keeping unrelated pages clean.
• The widget styles are injected into the CKEditor 5 editing area, so content looks the same while editing as it does once published (WYSIWYG).
• Optional submodule CKEditor Content Groups Schema generates JSON-LD structured data — FAQPage for accordions and ItemList for tabs — with a per-instance on/off toggle, to help search engines understand the content.

When and why would someone use this module? Use cases include:

• FAQ sections: accordions with one answer expanding at a time, optionally emitting FAQPage schema for rich results in search engines.
• Tabbed information: product specs, pricing tiers, or feature breakdowns split into tabs to avoid long scrolling.
• Editorial & landing pages: collapsible sections and tabbed panels built entirely by editors, with no developer involvement.
• Accessibility compliance: semantic, keyboard-navigable widgets replace presentational tables and framework-dependent snippets.
• Works in: any content type, Paragraphs, Layout Builder blocks, and any entity with a CKEditor 5 text field.

Post-Installation

After enabling the module, no new configuration pages or content types are created — it integrates directly into the CKEditor 5 toolbar configuration interface:

1. Go to Administration → Configuration → Content authoring → Text formats and editors and edit the text format that uses CKEditor 5.
2. In the Toolbar section, drag the Accordion, Tabs Horizontal and/or Tabs Vertical buttons into the active toolbar — add only the widgets you need.
3. Scroll down to the CKEditor 5 plugin settings section and open each widget. Set its default behavior (for example, the accordion's default state or the tabs' alignment) and tick which options editors may override per instance under "Allow editors to override…". Settings you leave unticked stay fixed to the format default.
4. (Optional) Enable the CKEditor Content Groups Schema submodule for SEO. It needs nothing added to the toolbar: a Schema toggle appears inside the widget's contextual toolbar so editors can turn FAQPage / ItemList JSON-LD on or off per instance. You can set the default value in the plugin settings.
5. Save your configuration and clear caches.
6. When editors create or edit content, clicking a widget button inserts the widget. A contextual toolbar then appears with options to add/remove items or tabs, reorder them, expand/collapse, and open the Properties panel.
7. On the Manage display tab, no separate formatter configuration is required — the module attaches its frontend library automatically when the rendered content contains a widget.

Clear caches (drush cr or via the UI at Administration → Configuration → Performance) if the toolbar buttons or plugin settings don't appear immediately after enabling the module.

Additional Requirements

This module requires no external libraries or third-party APIs. The only requirements are:

• Drupal core ^10 || ^11
• Core CKEditor 5 module (must be enabled) — provides the editor framework this module extends.

The optional CKEditor Content Groups Schema submodule depends only on this module and core CKEditor 5; it has no external dependencies.

Recommended modules/libraries

I also maintain and recommend the following modules. None of them rewrite or override Drupal's core output — they integrate cleanly with the existing system, extend its native capabilities, and work perfectly alongside this module:

• CKEditor Advanced Container — Adds a flexbox-based container and column layout system inside CKEditor 5. Pair it with this module to build full in-editor layouts: arrange accordions or tabs side by side in responsive columns, all without Layout Builder or a CSS framework.
• CKEditor Media Image Style — Adds a style selector to the CKEditor 5 media toolbar so editors can choose an image style per embed. Drop a media image inside an accordion or tab panel and control its display size from within the editor.
• CKEditor Media Title — Lets editors set a custom title attribute on media images embedded through CKEditor 5, directly from the media toolbar.
• Media Reference Override — Extends Drupal's media reference field to allow per-reference overrides of fields like alt text or title, leaving the original media entity reusable everywhere else.
• Advanced Image Media Attributes Formatter — Exposes additional HTML attributes (alt, title, class, etc.) as configurable options on Drupal's native image field formatters, without replacing the core rendering system.

Similar projects

• CKEditor Accordion — Provides an accordion widget for CKEditor. It is a good choice if an accordion is all you need. This module covers accordions and horizontal and vertical tabs in one modular package, adds per-instance Properties panels (default state, alignment, animation, etc.), and ships an optional submodule for FAQ/ItemList structured data.
• CKEditor 5 Plugin Pack — A collection of CKEditor 5 plugins, some of which bundle premium accordion/tabs features. This module is fully GPL, framework-free and self-contained, generating semantic <div>/<details> markup with no licensing or external build requirements.
• Quicktabs / Tabs — Build tabbed displays at the block or page level from existing content. They operate outside the text field. This module works inside a CKEditor text area, so editors create accordions and tabs as part of the body content itself.
• Paragraphs — A powerful way to build structured, component-based content at the field level. It is the right tool for reusable component layouts. This module is lighter-weight and lives entirely within a single rich text field, with no new entity types or fields to configure.
• HTML tables for layout (manual approach) — The traditional workaround for grouping content without a dedicated module. It produces inaccessible, non-responsive markup that breaks on mobile and is flagged as an error by accessibility auditors. This module replaces it with semantic, keyboard-navigable widgets.

If none of the above fits your workflow, this module may be worth evaluating as a straightforward, framework-independent option that works with any Drupal theme and requires no per-layout developer configuration.

Commercial Support

This module is developed and maintained by Nelo.
The maintainer is available for professional consulting and architectural guidance related to CKEditor 5 integrations, media systems, production Drupal implementations, and enterprise content architecture.

• drupal.org/u/nelo_drup

Supporting this Module

- Check out our sponsor, Dom Host Seo, who made this module possible with their support!

Community Documentation

Currently no external videos or demo sites are available. The module includes help text accessible via Help > ckeditor_content_groups.

For questions, bug reports, or feature requests, please use the issue queue on Drupal.org.