Skip to main content
Drupal Documentation for SCLS

Main navigation

  • Home
  • How-To Info for Library Staff
  • Drupal 10
  • Help

Breadcrumb

  1. Home
  2. How-To Info for Library Staff
  3. Creating and Editing Website Content

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 (
    Image
    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.
    Image
    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.
      Image
      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.

Book traversal links for Accordions (show/hide sections)

  • Overriding Sitewide Theme Styling
  • Up
  • Adding menu links
  • Managing Accounts for Your Drupal Site
  • Images
  • Creating and Editing Website Content
    • Anchor Links ("Bookmarks")
    • Disable/Enable Rich-Text
    • Display Differences Between the Editing Form and Published Content
    • Eliminate problem link and image references
    • Embed Codes
    • Forcing Links to Open in a New Window or Tab
    • Overriding Sitewide Theme Styling
    • Accordions (show/hide sections)
    • Adding menu links
    • Glorious Guide to Keyboard Shortcuts
  • Uploading Files to Media
  • Changing Menu Links
  • Creating Photo Albums & Galleries
  • Folders, Directories, and File Structure
  • Blocks
  • Paths and URL Aliases
  • Configuring Site Information
  • Developer Permissions
  • Homepage Variations
  • Events/Programs with repeating dates
  • Registration for Events/Programs
  • What is Cron?
  • Avoid mixed content warnings (HTTPS/HTTP)
  • LINKcat Title List (Experimental)
  • Performance settings: Cache pages for anonymous users
  • Slick Carousel
  • Uploading Files with IMCE

Tags

accordion (1)
account (2)
anchors (1)
blocks (0)
cache (1)
carousel (2)
CKEditor (5)
configuration (1)
content types (1)
CSS (1)
disable rich-text (1)
Drupal 10 (15)
Drupal 9 (16)
email (2)
embed code (1)
Entity Registration (5)
events (6)
file browser (1)
files (4)
files media (1)
folders (1)
formatting (2)
front page (3)
Google Analytics (1)
headings (2)
HTML (1)
iframe (2)
images (4)
imce (1)
Layout Builder (3)
link a pdf (1)
links (5)
login (1)
media (2)
menus (3)
nodes (1)
openid (1)
paste as plain text (1)
paths (4)
performance (1)
photo albums (1)
photo galleries (1)
redirects (3)
registration (5)
remove format (1)
repeat dates (2)
reports (1)
revisions (1)
sidebars (0)
site name (1)
slogan (1)
source (1)
sticky (2)
text formats (1)
themes (1)
toolbar (2)
URL aliases (4)
Webform (2)
widget (1)