An accordion is a UI component that shows a list of items, each with a title and hidden content. Users click a title to expand it and reveal the content beneath. Only one (or sometimes a few) sections are open at a time, keeping the page tidy and reducing scrolling.
When to use an accordion
Accordions work well when you have several related pieces of content that not every visitor needs to read in full. Good use cases include:
- Frequently asked questions (FAQ) pages
- Program or course details where users are likely looking for one specific thing
- Step-by-step processes where each step has detailed sub-content
- Content with natural sections that are self-contained, like department policies or event details
Avoid using an accordion if most users will need to read all of the content, or if the content is short enough to read comfortably as a single page. Hiding content adds a step for the user, so it should only be used when it genuinely helps them navigate.
Sharing a link to a specific accordion section
When a visitor expands an accordion section, the page URL automatically updates to include an anchor that points directly to that section. For example, a URL might change from ithaca.edu/faq to ithaca.edu/faq#tuition-and-fees. Click here to open the "Example 2" section.
This means you or your visitors can copy the URL from the browser address bar while a section is open and share it with others. Anyone who follows that link will be taken directly to the page with that section already expanded, rather than having to scroll and find it themselves. This is especially useful when directing students or colleagues to a specific piece of information.