Investigate collapsible content modules

Changed

Context

I want to have collapsible content sections, for pasted AI content.

Modules

View CKeditor Details Accordion on Drupal.orgCKeditor Details Accordion

3k+ installs, growing faster. Native details element

View on GitLab #3445267 Provide only-one-open functionality Status: Active

View on GitLab #3611709 Allow creating details from selected content Status: Active

View on GitLab #3330781 Prevent the use of summary elements that create accessibility failures Status: Active

View CKEditor Accordion on Drupal.orgCKEditor Accordion

21k+ installs, growing. <dl><dt><dd> elements.

View on Drupal.org #3592837 Support HTML5 <details>/<summary> output mode Status: Active

Discovery

AI findings

Recommendation: ckeditor_details. It already ships in the Mantra codebase (2.2.0-beta2 in composer.lock) and is enabled on architect, classes and theme, but it is not on any text format toolbar yet. mantra_starter already styles .text-formatted details and the editor widget in libraries/global/component/details.css.

Other candidates from the drupal-code-query index, none a better fit: ckeditor5_bootstrap_accordion (439 installs, Bootstrap markup), ckeditor_bootstrap_tabs (1,923, tabs not collapsibles), ckeditor_readmore (738, a read-more toggle), ckeditor5_spoiler (52). ckeditor5_plugin_pack has no collapsible submodule.

ckeditor_details

  • 3,487 installs, +1,213 over 12 months. Last commit Aug 2026, Drupal 12 work under way. Stable is 2.1.1; 2.2.0-beta2 (2026-10-13) requires ^11.4 || ^12.
  • Saves <details><summary>…</summary>…content…</details>. No front-end JS or CSS: the browser does the collapsing.
  • Native accessibility: keyboard support, expanded state announced. Chrome and Edge open a closed details element to show a Ctrl+F match. Works without JS.
  • One collapsible per block; no settings.
  • 2.1.x wrapped the body in <div class="details-wrapper">; 2.2 drops the wrapper.

Round-trip test of the installed 2.2.0-beta2 plugin in a headless CKEditor 5 instance (setData → getData → setData → getData):

Pasted AI content: <details>/<summary> HTML is upcast straight into the widget, so pasted collapsibles should come through as editable blocks (follows from the plugin's upcast converter, not tested with a real paste).

ckeditor_accordion

From reading the 2.3.0 source only; running the downloaded code was blocked, so nothing here was tested.

  • 21,178 installs, +3,909 over 12 months. Last commit Jun 2025.
  • Saves <dl class="ckeditor-accordion"><dt>…</dt><dd>…</dd></dl>. Several rows per accordion, with add-row-above, add-row-below and remove-row buttons.
  • hook_page_attachments_alter() attaches 4 KB of JS and 3 KB of CSS to every page, admin pages included.
  • One site-wide settings page: collapse all, keep several rows open, animation, open a row from a #hash link, HTML in titles. The same for every accordion.
  • Weaker accessibility: titles are rewritten into <a href="#"> with no aria-expanded or aria-controls. Closed rows are display:none, so Ctrl+F can't find them. Without JS all rows show expanded.
  • Brings its own styling; it would need restyling for mantra_starter.

When ckeditor_accordion would still win

A true accordion: several rows managed as one block, one row open at a time, opening a row from a #hash link, animation. Native <details> can do one-open-at-a-time through a shared name attribute, but ckeditor_details has no way to set it.

Next steps