Editor.js Accordion Block

A customizable Accordion block tool for Editor.js that lets you group and toggle visibility of multiple blocks (headings, paragraphs, tables, images, etc.) under a collapsible title. All styles are customizable

Features

• Group any number of Editor.js blocks under an expandable/collapsible section.
• Works in both edit and read-only modes.
• Configurable default expanded state and block count.
• Fully styleable via CSS overrides.
• Optional animations.
• Max block count enforcement.

Installation

npm install editorjs-collapsible-block

or via CDN:

<script src="https://cdn.jsdelivr.net/npm/editorjs-collapsible-block"></script>

Usage

1. Register in Editor.js

import EditorJS from '@editorjs/editorjs';
import Accordion from 'editorjs-collapsible-block';

const editor = new EditorJS({
  holder: 'editor',
  tools: {
    accordion: {
      class: Accordion,
      // optional config
      config: {
        defaultExpanded: true,
        maxBlockCount: 10,
        disableAnimation: false,
        overrides: {
          styles: {
            blockWrapper: 'background-color: lightyellow;',
            blockContent: 'border-left: 2px solid #ccc;',
            lastBlockContent: 'border-bottom: 2px solid #ccc;',
            insideContent: 'padding: 10px;',
          },
        },
      },
    },
  },
});

2. Using in the Editor

• Title: Editable inline text for the accordion heading.

• Block count: Number of following blocks to include in the accordion group.

• Default expanded: Whether the accordion starts open in read mode.

• Controlled blocks can be any Editor.js block type (header, paragraph, table, list, image, etc.).

3. Saving Data

save() returns:

{
  "type": "accordion",
  "data": {
    "settings": {
      "blockCount": 3,
      "defaultExpanded": true
    },
    "title": "My Accordion"
  }
}

Configuration Options

| Option | Type | Description | Default | | --------------------------------------- | ------------- | ----------------------------------------------------------------------------- | ----------- | | defaultExpanded | boolean | Whether accordion is expanded in read mode by default. | true | | overrides.classes.wrapper | string | Extra CSS classes for the accordion wrapper. | "" | | overrides.classes.settings | string | Extra classes for settings button container. | "" | | overrides.classes.title | string | Extra classes for the titlec. | "" | | overrides.classes.settingsPopover | string | Extra classes for settings popover container. | "" | | overrides.classes.settingsContent | string | Extra classes for popover content. | "" | | overrides.classes.settingsBlockConfig | string | Extra classes for popover block config wrapper. | "" | | overrides.classes.settingsCheckbox | string | Extra classes for settings checkbox input. | "" | | overrides.classes.settingsDelimiter | string | Extra classes for popover delimiter element. | "" | | overrides.styles.blockWrapper | string | CSS rules applied to .ce-block[data-readonly] .accordion-wrapper. | undefined | | overrides.styles.blockContent | string | CSS rules applied to .ce-block__content when editor is read-only. | undefined | | overrides.styles.lastBlockContent | string | CSS rules applied to the last block’s content. | undefined | | overrides.styles.insideContent | string | CSS rules applied to the content inside the block (.ce-block__content > *). | undefined | | overrides.settingsIcon | HTMLElement | Custom element for settings icon. | undefined | | disableAnimation | boolean | Disables expand/collapse animations. | false | | maxBlockCount | number | Maximum allowed block count in accordion. | 10 |

FAQ

Why am I using style overrides written only as CSS strings

Because I rely on plain CSS to style only the necessary blocks, without directly manipulating the DOM. This approach helps minimize unexpected bugs. In the future, I plan to add an option to use JavaScript for styling, as it would offer better performance.