How to Use the CKEditor Accordion in Drupal 8

As you already learned in a previous tutorial, CKEditor, the default WYSIWYG Editor for Drupal 8, can be enhanced through the installation of different plugins. They add buttons to the editor with additional features.

Content editors often need to embed accordion tabs into their articles, for example, to present a group of Frequently Asked Questions with their answers or to visually divide a topic into several subtopics.

The CKEditor Accordion module for Drupal 8 allows editors to insert an accordion directly into the WYSIWYG Editor (and therefore into the node) without the need to configure additional modules or even Views.

This tutorial will explain the usage of this module. Let’s start!

Step #1. Install the required modules

• Open your terminal window and type:

composer require drupal/ckeditor_accordion

This will download the latest stable version of the module (currently 1.1.0) to your modules folder.

• On your Drupal installation click Extend.
• Search for the module name, click the checkbox.
• Click Install.

Step #2. Configure the Module

• Click Configuration > CKEditor Accordion Configuration.
• Check Collapse all tabs by default, if not already checked.
• Click Save configuration.

• Click Configuration > Text formats and editors.

• Locate the Full HTML format
• click Configure

• Scroll down and click the Add group button in order to add a new button group.
• If you don’t see the Add group button, click the link Show group names on the right.

• Give this button group a proper name, for example, “Accordion”.
• Drag the “Accordion” button and drop it into the newly created group.

• Scroll down to the Enabled filters section.
• Check Limit allowed HTML tags and correct faulty HTML.

This will display a vertical tab at the end of the screen.

• Locate the dl HTML tag and replace it with <dl class>.
• Click Save configuration.

This allows the module to inject the required CSS class, in order to give the accordion the proper styling.

Step #3. Create the Content

• Click Content > Add Content > Basic Page.
• select Text format Full HTML.
• Click the Accordion button.

The module displays an accordion with two tabs by default. In order to add a third tab do the following:

• Right-click inside the accordion element.
• Select Add accordion tab after.

There are now 3 accordion tabs.

• Write a title and some text for each of them.
• Click Save.

You should see the accordion with three collapsed tabs.

If you want to show the first tab displayed by default, go back to Configuration > CKEditor Accordion and uncheck the Collapse all tabs option.

Step #4. Styling the Accordion

The module adds class=”styled” to the dl tag containing all the elements of the accordion. So you have to target this class, in order to style the accordion.

For example:

dl.styled > dt.active > a {
background-color: red;
}

Conclusion

The CKEditor accordion module lets you insert an accordion at any place of your node with the help of the CKEditor WYSIWYG Editor.