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.
- 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.
- 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.
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.
- Directions after entering 513 Parnassus Avenue at Student Helpdesk Contact Us.
- References at the bottom of PharmD Curricular Outcomes.
- Previous class years at Class Schedules.
- 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.
<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>