A museum's fictional loan instructions have a short packing requirement above a longer “Crate dimensions and padding” section. The editor needs to see the dimensions while revising them. The recipient should initially see the packing requirement and a clearly named expandable section. Those two views can differ without losing the dimensions.
Configure the two states separately
Merge this fragment into an existing, licensed TinyMCE initialization with its other required plugins:
const loanAccordionOptions = {
plugins: 'accordion',
toolbar: 'undo redo | accordion',
details_initial_state: 'expanded',
details_serialized_state: 'collapsed'
};
Do not replace your complete plugin list with this fragment. The accordion toolbar button inserts a section; loading the plugin also supplies Insert → Accordion when that menu is available.
The state options operate on details content even without the Accordion plugin. The plugin provides the authoring controls. Keeping those responsibilities separate helps diagnose a document that opens differently after loading even though no author pressed an accordion button.
| Option | Applies when | Policy in this example |
|---|---|---|
details_initial_state |
Sections are created or loaded into the editor | Expand for revision |
details_serialized_state |
Editor content is serialized for saving | Collapse for the recipient |
With inherited, existing sections keep their individual state. Newly created sections are open under the inherited initial-state policy. Use this when the document's own state should guide editing instead of opening every section.
Read the exported result before changing the toggle code
Use a disposable loan-instructions record. Put “Use the padded crate marked L-17” in an ordinary visible paragraph. Give the accordion the summary “Crate dimensions and padding,” and put the measurements inside it.
Open the section, edit a measurement, then inspect the existing instance:
const loanEditor = tinymce.get('loan-instructions');
if (!loanEditor) throw new Error('Loan editor is not ready');
console.log(loanEditor.getContent());
Under the collapsed serialized policy, the output should represent a closed section while retaining its summary and edited body. Inspect the returned markup and your application's saved record. getContent() captures content; it does not send it to storage. The TinyMCE extraction guide explains the form boundary.
The plugin documentation explicitly describes an open editor and closed Preview as an expected consequence of these two settings. If authors find that surprising, explain the recipient starting state near the preview action or choose inherited serialization. Repeatedly toggling the section during editing cannot override a forced serialized-state policy.
Use commands for the selected section
When an application action needs to open the selected accordion, the plugin offers:
loanEditor.execCommand('ToggleAccordion', false, true);
To close all accordions in the current document:
loanEditor.execCommand('ToggleAllAccordions', false, false);
These are alternative editing actions, not save operations. The selection-dependent command needs the caret in the intended section. The all-sections command affects the entire current document. Keep that difference explicit in button labels.
Deliver the measurements, not an unexplained closed box
Save and reopen the loan record through the application's real route. Check that the changed measurement remains inside the section even though editing opens it again. Then inspect the recipient renderer: the packing requirement stays visible, the summary names the hidden information, and opening it reveals the latest measurement.
For reader markup and presentation, use the HTML details and summary guide. TinyMCE's editing and serialization settings do not decide whether a separate publishing renderer preserves that markup. Finish by checking the actual recipient view with the revised L-17 dimensions.