Collapsible sections

For answers, spoilers or long side notes that only some readers want. It is saved as a standard <details> element, so it folds and opens on any page without scripts.

createEditor('#editor', {
  toolbar: 'heading | bold | details | undo redo',
});

How to use

• On an empty line, press details: a section goes in with its title "Show more" selected, so you can type the title right away.
• With paragraphs selected, the button folds them into a section.
• Inside a section, the button removes it: the title becomes a paragraph and the content stays. Backspace at the start of the title does the same.
• On an empty line, type / and pick "Collapsible section".

Always open while editing

Hidden content is hard to edit, so sections stay open in the editor and clicking the title does not fold them. A section that is saved folded shows ▸ before its title.

With the caret in a section, a bar shows above its right end:

• Start expanded: adds open to the saved HTML so readers see it open. Off (folded) by default.
• Remove collapsible section: keeps the content without the fold.

In read-only mode (readOnly: true or setReadOnly(true)) sections fold as they will be saved, and readers can open them.

Saved HTML

<details style="border: 1px solid #d0d7de; border-radius: 8px; padding: 8px 14px; margin: 0.8em 0">
  <summary style="font-weight: 600">Show the answer</summary>
  <p>Hallasan (1,947 m)</p>
</details>

The default title of a new section is the UI string detailsSummary; change it with the locale option.

createEditor('#editor', {
  locale: { detailsSummary: 'Read more' },
});

editor.exec('details');      // add / remove
editor.exec('detailsOpen');  // toggle "start expanded"

Presets

Under ⋯ in the board and full presets.

Options