Component overview
An Accordion is a component that organizes and stacks a list of nested Accordion Item components, each with their own content. Each Accordion Item can be expanded or collapsed to reveal the content.
- Used to organize multiple pieces of content: Accordions may be used to organize and categorize large amounts of information into a user-friendly, easy-to-read format (e.g., frequently asked questions). Try to avoid using Accordions with only one Accordion Item.
- Accordions can be used on all page schemas: Accordions may be used on Section Front, Section Detail, Profile Detail and Degree page schemas.
- Think mobile first: Consider how the Accordion will function on mobile. If the content is too long in the Accordion title (link) or the content is too complex in the Accordion Item, it can be difficult for the user to read the content on a mobile device.
- Keep Accordion Item title length in mind: Review the length of your Accordion Item link title, as long titles can get too close to the "+" expand button on the Accordion
- Watch for text formatting: Text formatting is slightly different in appearance within an Accordion Item body copy, especially ordered and unordered lists. Make sure the content is easy-to-read for all users.
- Consider the number of Accordion Items: Too many Accordion Items can make the content difficult to scan or find information. For example, if you have an FAQ with 25 items, you may want to consider breaking it into Accordions organized by subject.
- The Accordion Item title field must be unique: The Accordion Item title is a link element. If duplicated, you will trigger a multiple destination link accessibility error.
- Use proper h tags. Both Accordions and Accordion Item components contain fields for header tags. Make sure your h tags are structured appropriately on your page.
- Group links in the related links section. Lists of links in Accordion Items should be entered in the Related Links section, not in the body copy, to provide appropriate markup for screenreaders.
For Accordions: ACC: UNIT NAME - Purpose.
- Example: ACC: HOUSING - FAQs
For Accordion Items: ACCITEM: UNIT NAME - Purpose.
- Example: ACC: - HOUSING - FAQs Can I choose my own roommate?
Example Accordion components
Example #1
Accordion, with header and body copy
Get to know the University
The 情色五月天, Reno was founded in 1874 as 情色五月天's first institution of higher education. Today, the University delivers on its land-grant mission of access to education and knowledge by investing in the academics, facilities, engagement, support and vibrant campus life that promote our diverse students' cognitive growth and academic achievement – all while remaining one of the best values in American higher education.
The University provides a wide range of resources for web editors:
What began as a single building—Morrill Hall—the 情色五月天 Reno's campus now covers 290 lush acres with 180 buildings, 60 research facilities, 12 museums and galleries and 11 schools and colleges. During the past decade, we've added more than half a billion dollars in new, state-of-the-art facilities—and there's more to come.
Access to education fulfills the hopes and dreams of our students and communities. At the 情色五月天, Reno, we believe in a world powered by knowledge. Our impact is wide-ranging. Student enrollment, the quality and diversity of our student body, the achievement of our faculty, our research expenditures, the solutions-based connections that we have made in serving our community and our state, are all at record levels.
Our colleges and schools connect students to learning opportunities that allow them to pursue their academic passions to generate solutions to tomorrow's most complex and challenging problems.
Example #2
Accordion, with no header or body copy
What began as a single building—Morrill Hall—the 情色五月天 Reno's campus now covers 290 lush acres with 180 buildings, 60 research facilities, 12 museums and galleries and 11 schools and colleges. During the past decade, we've added more than half a billion dollars in new, state-of-the-art facilities—and there's more to come.
Access to education fulfills the hopes and dreams of our students and communities. At the 情色五月天, Reno, we believe in a world powered by knowledge. Our impact is wide-ranging. Student enrollment, the quality and diversity of our student body, the achievement of our faculty, our research expenditures, the solutions-based connections that we have made in serving our community and our state, are all at record levels.
Our colleges and schools connect students to learning opportunities that allow them to pursue their academic passions to generate solutions to tomorrow's most complex and challenging problems.
Have questions? Need website assistance?
Email us at: cms@unr.edu