On this page
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.
Use an accordion if:
- You want to reduce the amount of info initially presented on a page.
- The amount of optional info you want to include is not enough to warrant creating a separate page.
- You need to include a transcript for audio or video.
Avoid using an accordion if:
- The revealed info is important or critical.
- 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.
- 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.
Activate this link
This is text that is revealed. Reactivating the link above will hide this text.
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.
- The two audio transcripts at CERSI News.
Copy the code below and paste it while editing in source mode. Exit source mode, then edit the accordion link and accordion content.
<summary>Activate this link</summary>
<p>This is text that is revealed. Reactivating the link above will hide this text.</p>
- 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.