Accordions

This page describes for web editors in the School of Pharmacy how to use accordions in a website built by the Communications Team in the Office of Administration.

On this page

What is an accordion?

An accordion is a special type of link that reveals or hides additional info. The additional info is initially hidden. When the visitor activates the link associated with the accordion, the additional info is revealed. The visitor can then optionally reactivate the same link to rehide the additional info.

Why use an accordion?

Use an accordion if:

  1. You want to reduce the amount of info initially presented on a page.
  2. The amount of optional info you want to include is not enough to warrant creating a separate page.
  3. You need to include a transcript for audio or video.

Why not use an accordion?

Avoid using an accordion if:

  1. The revealed info is important or critical.
  2. The revealed info is empty or forthcoming. It’s frustrating to activate a link expecting to see info only to see no info or be told that info is forthcoming.
  3. You want to hide or reveal more than one section of info. For that, use Multitab Structures instead.

Avoid using many accordions on one page if visitors are likely to want to open all of them. Not sure? Test your page with five users.

Examples

Activate this link

This is text that is revealed. Reactivating the link above will hide this text.

Other examples in context

Add an accordion

Copy the code below and paste it while editing in source mode. Exit source mode, then edit the accordion link and accordion content.

<details>

<summary>Activate this link</summary>

<p>This is text that is revealed. Reactivating the link above will hide this text.</p>

</details>

Set whether an accordion is open or closed by default

  • To set an accordion to be open when the page loads, leave it open when you edit and save the page.
  • To set an accordion to be closed when the page loads, leave it closed when you edit and save the page.