Skip to main content
NiCE CXone Mpower Expert
Expert Success Center

Collapsible accordions in the Editor

The editor enables you to fold content details into an expandable / collapsible block so readers can skim for the information that is relevant to them and expand specific sections to get the details they need. Use collapsible accordions to author content for slightly different use cases.

The key benefits to the accordion block versus creating an accordion with HTML are that there is no need for JavaScript to expand / collapse the block, and Ctrl+F works on collapsed text.

Add a collapsible accordion

In the Editor toolbar, click Elements, then click Accordion. This will insert the accordion block.

UI - TinyMCE Editor - Collapsible accordion.png

Accordion components

The accordion block includes a summary and body sections. The summary will always be displayed, even when the accordion is closed or collapsed. Once the accordion is expanded, the body will also be visible.

UI - TinyMCE Editor - Accordion block.png

Near the accordion block will be the option to expand / collapse the accordion, and a delete (garbage can icon) option.

UI - TinyMCE Editor - Accordion block options.png

Visual marker

The visual marker shows whether the accordion is expanded or collapsed. By default, on page load, accordions are collapsed.

By default, the marker is a triangle which points tot he right or down when the accordion is collapsed or expanded, respectively. The marker can be customized with CSS if you prefer a different symbol.

  •  When collapsed, the triangle marker points to the right.
    UI - TinyMCE Editor - Accordion marker - closed.png
  • When expanded, the triangle marker points down.
    UI - TinyMCE Editor - Accordion marker - open.png

 

  • Was this article helpful?