Accordions (show/hide sections)

Drupal's CKEditor Accordion module provides the ability to create and display content in an accordion, aka a list of headers that can be clicked to show or hide content. Accordions are often used for FAQs and other situations where it is helpful to provide an overview and allow users to expose content a little at a time.

Getting started

CKEditor Accordion is not turned on by default for all sites. Contact SCLS staff to have it enabled for your site. Once enabled, it adds a button to the editing toolbar which inserts an accordion.

Adding an accordion to your content

  1. Create a new content node on your site (e.g. article, basic page, etc.).
  2. Click the Insert accordion button (
    Insert accordion button
    ). An accordion with two tabs will be added.
  3. Change the prefilled text in each section to your content (otherwise your published page will display "Accordion tab 1," etc.). The very top "Accordion" label (just inside the dashed red outline) will not be shown.
    A blank accordion includes two prefilled tabs surrounded by a red dashed line.
  4. To add a third tab do the following:
    1. Right-click inside the accordion element.
    2. Select Add accordion tab before/after.
      The right-click menu offers options to add an accordion tab before/after the current tab, or remove the current tab.
  5. Save the content node.

The top accordion tab will be open by default. There is an alternate setting to keep all tabs closed by default. Contact SCLS staff if you want your site to use this alternate setting.

Removing accordion tabs

  1. Place the cursor in the section you wish to remove.
  2. Right-click inside the accordion element.
  3. Select Remove accordion tab.
  4. Save the content node.