Accordion plugin

This feature is only available for TinyMCE 6.5 and later.

The Accordion plugin allows for the creation of sections in a document that can be expanded or collapsed to show or hide additional content.

Interactive example

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="accordion">

  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

  <h1 style="text-align: center;">The Accordion plugin</h1>

  <p>This is a demo of the <strong>Accordion</strong> open source plugin.</p>

  <details class="mce-accordion">
    <summary>What does the <strong>Accordion</strong> plugin do?</summary>
      <p>The Accordion plugin allows for the creation of collapsible sections in a document that can be expanded or collapsed to show or hide additional content.</p>
  </details>

  <details class="mce-accordion">
    <summary>How does it present to an end-user?</summary>
      <p>By default, when the <code>accordion</code> plugin is loaded, the command is available in the TinyMCE menu at <strong>Insert → Accordion</strong>.</p>
      <p>Adding <code>accordion</code> to the <code>toolbar</code> in the TinyMCE configuration adds an Accordion icon to the TinyMCE toolbar.</p>
      <p>And, when a specific collapsible section is selected, a pop-up menu presents offering two controls: one to collapse or expand the selected section; and one to delete the selected section.</p>
  </details>

  <details class="mce-accordion">
    <summary>Are there other Accordion options?</summary>
      <p>The Accordion plugin provides:<br />
         four commands (<code>InsertAccordion</code>, <code>ToggleAccordion</code>, <code>ToggleAllAccordions</code>, and <code>RemoveAccordion</code>); and<br />
         two initialization options (<code>details_initial_state</code> and <code>details_serialized_state</code>).</p>
      <p>See below for details</p>
  </details>


  <h2>Got questions or need help?</h2>

  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/tinymce/6/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>

  <h2>Found a bug?</h2>

  <p>If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>

  <h2>Finally…</h2>

  <p>Check out <a href="http://plupload.com" target="_blank">Plupload</a>, an upload solution that features HTML5 upload support.</p>

  <p>Thanks for supporting TinyMCE. We hope it helps you in creating great content.</p>

  <p>All the best from the TinyMCE team.</p>
</textarea>
tinymce.init({
  selector: 'textarea#accordion',
  plugins: [
    "advlist", "anchor", "autolink", "charmap", "code", "fullscreen", 
    "help", "image", "insertdatetime", "link", "lists", "media", 
    "preview", "searchreplace", "table", "visualblocks", "accordion"
    ],
  height: 1200,
  toolbar: "undo redo |link image accordion | styles | bold italic underline strikethrough | align | bullist numlist",
});

Basic setup

To add the Accordion plugin to the editor, add accordion to the plugins option in the editor configuration.

To add the Accordion toolbar icon to the TinyMCE toolbar, add accordion to the toolbar option in the editor configuration.

For example:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'accordion',
  toolbar: 'accordion',
});

Options

The following configuration options affect the behavior of the Accordion plugin.

details_initial_state

This option sets the state of Accordion sections

  • when they are created; and

  • when they are already extant as an editor loads.

When set to collapsed, all Accordions will present as closed on creation and on the editor loading.

When set to expanded, all Accordions will present as open on creation and on the editor loading.

When set to inherited, Accordions preserve their individual state and present as open when created.

The default value for this option is inherited.

Type: String

Possible values: inherited, collapsed, expanded

Default value: inherited

Example: using details_initial_state to set all created Accordion sections to present as closed by default

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: accordion
  details_initial_state: 'collapsed'
});

Example: using details_initial_state to set pre-configured <details> content in new TinyMCE documents to present as open

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  newdocument_content: '<details><summary>Accordion summary...</summary><p>Accordion body...</p></details>',
  details_initial_state: 'expanded',
});

The option does not require the Accordion plugin be loaded to come into effect.

In the above example, when File → New document is selected, the newdocument_content option puts a <details> element into the new editor instance and the details_initial_state option causes that element to present as open.

details_serialized_state

This option sets the state of Accordion sections when content in a TinyMCE instance is saved.

When set to collapsed, all Accordions are set to closed on content save.

When set to expanded, all Accordions are set to open on content save.

When set to inherited, Accordions preserve their individual state on content save.

The default value for this option is inherited.

Type: String

Possible values: inherited, collapsed, expanded

Default value: inherited

Example: using details_serialized_state to close all Accordions on content save

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  details_serialized_state: 'collapsed',
});

Example: using details_serialized_state to save pre-configured <details> content in new TinyMCE documents as closed

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'preview', // added to this example for UX demonstration purposes; see the NOTE below
  newdocument_content: '<details><summary>Accordion summary...</summary><p>Accordion body...</p></details>',
  details_initial_state: 'expanded',
  details_serialized_state: 'collapsed',
});

The option does not require the Accordion plugin be loaded to come into effect.

In the above example, when File → New document is selected, the newdocument_content option puts a <details> element into the new editor instance.

The details_initial_state option causes that element to present as open while the details_serialized_state sets the saved content state to closed.

This example also demonstrates a potential UX issue with, in effect, setting details_initial_state and details_serialied_state at odds. Choosing File → New document results in a new editor instance containing an Accordion element presented open, as set by details_initial_state.

Choosing File → Preview shows this same newly-created document with a closed Accordion element, as set by details_serialized_state.

The difference is expected, given the option values. It may, nonetheless, be experienced as a UX inconsistency for some end-users.

Toolbar buttons

The Accordion plugin provides the following toolbar buttons:

Toolbar button identifier Description

accordion

Executes the InsertAccordion command, adding an Accordion element at the current location.

accordiontoggle

Executes the ToggleAccordion command, reversing the state of the selected Accordion, to open from closed and to closed from open.

accordionremove

Executes the RemoveAccordion command, removing the selected Accordion.

These toolbar buttons can be added to the editor using:

The Accordion plugin provides the following menu items:

Menu item identifier Default Menu Location Description

accordion

Insert

Executes the InsertAccordion command, adding an Accordion element at the current location.

These menu items can be added to the editor using:

Commands

The Accordion plugin provides the following TinyMCE commands.

Name Arguments Description

InsertAccordion

none

Inserts an accordion element at the current position.

ToggleAccordion

true false optional state

Toggles an accordion’s state. Uses the optional value argument to set the desired state. Will set the accordion to an open state if true is specified and to a closed state of 'false' is specified.

ToggleAllAccordions

true false optional state

Toggles the state of all accordions in the current document. Uses the optional value argument to set the desired state. Will set the accordions to an open state if true is specified and to a closed state of 'false' is specified.

RemoveAccordion

none

Removes an accordion at the current position.
Examples
// inserts an accordion section at the current position
tinymce.activeEditor.execCommand('InsertAccordion');

// sets the accordion at the current position to open
tinymce.activeEditor.execCommand('ToggleAccordion', false, true);

// sets all accordions in the current document to closed
tinymce.activeEditor.execCommand('ToggleAllAccordions', false, false);

// removes the accordion at the current position
tinymce.activeEditor.execCommand('RemoveAccordion');

Events

The Accordion plugin provides the following events.

The following events are provided by the Accordion plugin.

Name Data Description

ToggledAccordion

Passes the state — true or ~+false+ — and the element.

Fired when an accordion is toggled.

ToggledAllAccordions

Passes the state — true, ~+false+, or undefined — and all the affected elements.

Fired when all accordions are toggled.