Accordion Short Code
The accordion toggles the display of content with a hide/show button similar to a collapsible tab. Longer content can be moved into an accordion that is related but not primary content.
Accordion is used to display copy from:
- excerpts from a statute or memo
- event transcripts
| field | description | required |
|---|---|---|
| title | header for the accordion | yes |
| kicker | short sub-title | no |
| icon | The icon field can take any icon value from the Icon component. | no |
{{< accordion icon="content_copy" kicker="Memo M-23-22" title="**Delivering a Digital-First Public Experience, Section III.A**: Requirements for Websites and Digital Services" >}}
*Note: For footnotes, [view the full policy guidance as a web page](https://www.whitehouse.gov/omb/management/ofcio/delivering-a-digital-first-public-experience/).*
**Section III. DELIVERING A DIGITAL-FIRST PUBLIC EXPERIENCE**
**A. Requirements for Websites and Digital Services**
Federal websites and digital services serve agencies’ missions and help users find the information and support they need. Agencies should ensure their websites, including web applications, digital services, and mobile applications, conform to the requirements and principles described below to design and deliver a high-quality, integrated digital experience that is simple, seamless, and secure across agencies for all users.
{{< highlight >}}**1. Accessible to People of Diverse Abilities**{{< /highlight >}}
The Federal Government serves people of all abilities. In designing their websites and digital services, agencies must strive from the start to maximize access and usability so the widest possible range of people may reach and interact with the government through its websites and digital services.
{{< /accordion >}}
The {{< highlight >}} short code is often used within the accordion.
Example
Live page: An introduction to search.
{{< accordion kicker="Slide by Slide" title="USWDS Monthly Call - Presentation Script for September 2024" icon="content_copy" >}}
**Slide 1.** Thanks Jeannie, and welcome, everyone, to the U.S. Web Design System monthly call for October 2024. We're clearly in the middle of spooky season. With Halloween only a couple weeks away, the USWDS logo is trying to get its costume ready. It's doing its best to be a vampire, but — as we can see here with the two triangles in red and the rest in black — it's still having trouble getting the fangs to look right.
**Slide 2.** My name is Dan Williams, he/him, and I'm the USWDS project lead — and here on-screen is my avatar: dark hair, blue sweater, collared shirt, glasses —today real-life me is wearing a gray shirt, warm red pants, and some pinkish socks, approximately violet-warm-10.
{{< /accordion >}}
Example
Live page: USWDS Monthly Call - November 2024.