Creating accordions in Drupal

This page covers:

• when to use accordions
• when to avoid accordions
• content standards for accordions
• how to create accordions

When to use accordions

Only use an accordion:

• to show an overview of multiple, related sections of content
• so users can show and hide sections that are relevant to them
• when the main task is a logical, step-by-step process
• if users only need a few pieces of information on the page

When to avoid accordions

You should not use an accordion when:

• users need to see all the content on the page. Accordions hide content. They work better when users need only a few pieces of information on the page
• there is little content on the page. If you have a page where all the content is hidden behind accordions it can look empty

Instead of using an accordion it is usually better to:

• simplify and reduce the amount of content
• split the content across multiple pages
• keep the content on a single page, separated by headings
• use a list of anchor links at the start of the page to take the user to particular sections of a page

Content standards for accordions

• Make sure headings accurately reflects the content in the accordion. They should include any keywords users will be scanning for.
• Do not use more than 10 accordions on one page. Aim for fewer than 10 if possible.
• Include introductory text above the accordions to give users some context about the page.

How to create accordions

Hover over 'Content' then 'Add content'. Select 'Accordion'.

accordion1.jpg

A new Accordion edit screen will appear.

Add the page 'Title'. You should add some copy in the 'Body' field to give the user some context about what the page is about. 

Below this, you'll see the 'Page item' section.

The 'Item title' is the heading of the section. These titles should not be formatted as questions. Do not use them for FAQs. 

Content should be placed in the 'Item body'. Read our instructions for creating basic web pages for more advice on formatting. 

accordion2.jpg

If you want to add another section, select 'Add another item'.

You can change the order of the sections by dragging them with the + sign on the left-hand side.

Once you finish, remember to save the changes.

Watch the video: How to replace an existing webpage with an accordion page