Purpose

Accordions provide a way for content to be organized into collapsible sections that users can expand or collapse by clicking on the title. This works well where you want to present additional details without overwhelming visitors.

When to Use

This microcontent type can only be added to basic pages. Accordions work well for long lists of content that authors would like to place in different parts of the site.

The Nielsen Norman Group has the additional following advise about accordions:

An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. They can be used effectively if you keep a few simple guidelines in mind.

Keep in mind these usability issues when deciding whether or not to use an accordion menu:

Clicks can feel cumbersome.
Accordions increase interaction cost-- how much mental and physical effort it takes to interact with your website.
If you can't see it you don't know about it

There are other advantages to applying accordions to long, content-rich pages:

Collapsing the page minimizes scrolling.
The headings form a mental model of the information available.
Hiding (some of) the content can make the web page appear less daunting.
Accordions can be a better alternative to within-page links. People expect clicking a link will load a new page.

When you're considering how long to let your webpage go keep these myths in mind as well:

Users don’t scroll long pages: Users do scroll when the content is relevant, organized properly, and formatted for ease of scanning.
Customers don’t read information at the bottom of the page: eye tracking research shows users devote 20% of their attention to content below the fold.
People avoid pages with a lot of content: People have the ability to handle vast amounts of information, when presented properly.

In the end, accordions should be avoided when your audience needs most or all of the content on the page to answer their questions.

Accordions are more suitable when people need only a few key pieces of content on a single page and when the information is restricted to very small spaces, such as on mobile devices.

Elements

Title: limited to 70 characters and can be hidden
Description: optional and can be up to 200 characters
List items: title limited to 120 characters and details unlimited with basic text formatting
Total of 20 items max within a single accordion

First you will create an accordion, and then "place" the accordion onto a Basic Page.

Log in to your site

Everyone who writes things on this website has a special title. These titles give them certain abilities, like who can edit, review and publish what. You can ask for a different title or take one away from someone using the user manager.

Navigate to /admin/content/micro

This Admin view displays all micro-content on the site and allows authors to sort & filter the list. Authors can edit micro-content types from this view.

Create a new "Accordion"

Click on "Add micro-content" and select "Accordion". This will open up a blank accordion form for you to complete. Once you've created your Accordion content, be sure to save.

Shortcuts to add Accordion content:

Navigate to /node/add/accordion
Hover over Content -- Add micro-content and select Accordion

Place the "Accordion" content on a Basic Page

Once your Accordion is created, you can place it on a Basic Page.

Edit the Basic Page you would like to add the Accordion to.
In the Body field, select the "Insert from Component Library" tool and choose "Accordion".
Select the "Accordion Library" tab and choose the micro-content you created.
Set alignment if applicable and click "Embed".

Learn About Different Levels of Authors, which use an accordion inside a Basic Page.

How to Edit a Micro-Content

You can quickly edit micro-content like accordions within your Basic Page by clicking on the micro-content within the Body field and then clicking on the gear icon.

Another method to editing micro-content would be to navigate to /admin/content/micro and click on the "Edit" button beside the micro-content you'd like to edit.