CKEditor 5 Bootstrap Accordion

CKEditor 5 Bootstrap Accordion allows accordions to be seamlessly inserted into content on your Bootstrap-enabled Drupal website. Use Drupal’s inbuilt CKEditor to easily insert, move, or delete accordions with text and other elements in a fully WYSIWYG experience. Works with Bootstrap 5.

All Features

For content editors

Add an accordion and insert or delete accordion items conveniently from the CKEditor toolbars.
Choose to open the first item or all items individually for each accordion.
Accordions work right out of the box, no extra CSS or JavaScript is required on your site if it already uses Bootstrap 5's provided CSS and JavaScript.
Accordion-in-accordion nesting is supported.

For developers

Build a custom CKEditor 5 plugin to add your own items to an accordion's toolbar, simply by altering the bootstrapAccordion.toolbarItems configuration.
Customize accordion styling by overriding Bootstrap 5's CSS variables, and style accordions to match your site's theme while keeping their functionality intact.

Step 1: Before Installation

Your site must already be using Bootstrap 5 in its frontend theme. Options include Bootstrap 5 and FlexiStyle Bootstrap among others. Advanced uses may attach the Bootstrap 5 library themselves.

Step 2: Install for Drupal CMS 11+ or Drupal Core 9.5+

Click “Extend”, “Browse modules”, enter “CKEditor 5 Bootstrap Accordion” in the search, and click the seach button or hit return on your keyboard.

Screenshot shows the Drupal CMS “Browse projects” page with “Extend” and “Browse modules” circled, “CKEditor 5 Bootstrap Accordion” entered in the search

Once the search results appear, click “Install” and wait for the text to change to “Installed”.

Screenshot shows the search result for CKEditor 5 Bootstrap Accordion

That’s it! CKEditor 5 Bootstrap Accordion is now installed on your Drupal CMS site. Continue to the next step below to add it to CKEditor.

Run the following Composer command:

composer require 'drupal/ckeditor5_bootstrap_accordion:^1.0'

Afterward, enable the module with the following Drush command:

drush en ckeditor5_bootstrap_accordion

Step 3: Add to CKEditor

Append the following to the end of your site name and go to it in your browser. For example, if your site is example.com, the final link will look like example.com/admin/config/content/formats. You may need to first log in to your administrative account.

/admin/config/content/formats

Click “Configure” on the text format you’d like to be able to insert icons in, drag the plugin onto the CKEditor toolbar in the desired spot, and save the configuration.

Screenshot shows CKEditor 5 Bootstrap Accordion being dragged onto the CKEditor toolbar

Under “Enabled filters” turn on the “Accordion enabler” filter and save the configuration.

Screenshot shows the “Accordion enabler” filter as enabled