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?

• Why use an accordion?

• Why not use an accordion?

• Examples

• Add an accordion

• Set whether an accordion is open or closed by default

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

Other examples in context

• Responsibilities Include at Office of Student and Curricular Affairs or Office of Education and Instructional Services.
• Non-California resident? Learn how residency affects you at Admissions.
• FAQs at Student Helpdesk FAQs.
• References at the bottom of PharmD Curricular Outcomes.
• Previous class years at Class Schedules.
• The two audio transcripts at CERSI News.

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.