A&S Web Guide

A helpful guide to web content and accessibility for the Faculty of Arts & Science, University of Toronto community.

You are here: Home / Drupal Guide / Accordions

Accordions

Accordions are a great way to condense pages on your website that need to contain a lot of information. They make it easy for your website’s visitors to skim a page, determine which content is relevant to them, and click into the accordion to learn more. For example, they work well for FAQs or contact information.

Add Accordions

To add an accordion to a page:

  1. Click on the Accordion icon in the editing panel.
  2. A window will pop up with several fields to fill in:

    • Accordion Set Title: Enter a basic title for your accordion set. This won’t display on your website, but Drupal needs content to have a unique ID.
    • Number of Accordions: Select the number of accordions you need the accordion set to contain (between 2 and 9).
    • AccordionLink1, AccordionLink2, etc.: These are the public-facing titles for each accordion within the set, meaning these labels will be visible to your website’s visitors.
    • Content1, Content2, etc.: Each box represents an accordion within the set. Content1 is the top accordion (and so on). Enter dummy text into each of the boxes. You’ll be able to add your real content, including formatting (headings, links, images, etc.), after you complete step three below.
  3. Press OK (the green button at the bottom of the pop-up window).
  4. To add content, click in the accordion, and start typing or pasting content, adding headings, hyperlinks, etc.

Delete an Accordion or All Accordions

To delete one or all accordions within a set, you have to access the accordion’s properties menu. There are two ways to do this:

  1. Double-click on the accordion set, or,
  2. Click on an accordion within the set, and then click on the Accordion icon in the editing panel.

Once you have completed one of the steps above:

  1. Under Remove an Accordion Element:

    • Remove this Accordion Element: Delete all accordions and the content in them.
    • Accordion 1’s title, etc.: Remove first accordion (and so on). Please note that you should not use this option if you only have two accordions; downsizing to one accordion may break the remaining accordion.
  2. Press OK.