---
title: "Accordion plugin"
description: "Creates sections that can be expanded or collapsed to show or hide content."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/accordion/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/accordion/index.md"
version: "6"
last_updated: "2023-11-30T00:15:30Z"
tokens: 1911
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/accordion/).
# Accordion plugin

> **Note:** 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

**Example**

```js
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:

```js
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

```js
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

```js
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',
});
```

> **Note:** 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`](../content-behavior-options/#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

```js
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

```js
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',
});
```

> **Note:** 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`](../content-behavior-options/#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 [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Accordion plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | 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:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).

## 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
```js
// 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. |