Skip to main content

Accordion

Plugin alias: accordion

editor42.init({
plugins: 'accordion'
});

Provides collapsible accordion sections in the editor content using HTML <details>/<summary> elements. Users can insert new accordions, toggle their open/closed state, and remove them. The plugin manages keyboard behavior (Enter in summary toggles instead of creating a newline), content normalization, and browser-specific quirks.

Commands

CommandDescription
InsertAccordionInserts a new accordion at the current cursor position. Uses selected text as the summary if any, otherwise defaults to placeholder text.
ToggleAccordionToggles the open/closed state of the accordion at the current selection. Accepts an optional boolean value to force a specific state.
ToggleAllAccordionsToggles all accordions in the editor body. Accepts an optional boolean to force all open or all closed.
RemoveAccordionRemoves the accordion surrounding the current selection.

Toolbar buttons

NameTypeDescription
accordionButtonInsert accordion
accordiontoggleToggle buttonToggle accordion open/closed
accordionremoveToggle buttonDelete accordion

A context toolbar with accordiontoggle and accordionremove appears automatically when the cursor is inside a <details> element.

NameDescription
accordionInsert accordion

Events

EventDescription
ToggledAccordionFired after a single accordion is toggled. Payload: { element, state }
ToggledAllAccordionsFired after all accordions are toggled. Payload: { elements, state }