UCSF

Accordions

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

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. You intend to have many accordions on the same page, which can force visitors to activate a lot of links in order to view all the info they want to see. Not sure? Test your page with five users.
  3. 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.
  4. You want to hide or reveal more than one section of info. For that, use Multitab Structures instead.

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.

<p class="showhidetoggle"><a href="#">Activate this link</a>.</p>

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