Accordion

Component library

How to use this component

The accordion component creates collapsible content sections, to help organize content and reduce scrolling. It's perfect for FAQs and sequential lists, providing logical grouping and organization of related content.

An accordion component is a vertically stacked list that, when selected, allows users to navigate through information by revealing or hiding sections of content.

Accordion component

View video transcript for Accordion component.

Accordion anatomy

Expand/collapse buttons
Title
Description
Icon

Sample

Heading 3

This is a placeholder accordion that shows how the Accordion component works.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header 4

Ut enim ad minim veniam quis nostrud
Exercitation ullamco laboris nisi ut aliquip
Ex ea commodo consequat
Duis aute irure dolor in reprehenderit
Voluptate velit esse cillum
Dolore eu fugiat nulla pariatur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Best practices

Enable "Expand/Collapse All" for accordions with more than three titles or large content areas to facilitate easy viewing.
Short pages with minimal scrolling are suitable for limited content, especially on mobile devices.

Use to logically group or organize related content.
Provide clear and descriptive labels for each title.
Use meaningful titles for each accordion title.
Use paragraphs and headers to arrange long content.

Don't hide critical information within the accordion.
Don't embed video, images, or other media types.
Don't overwhelm users with too many accordion sections.
Don't nest accordions within accordions.

Placement

Best used in wider, main content areas rather than narrow side columns.
Accordions can be placed under other components like the Tab component.

Accordion characteristics

Click the "Add" button at the bottom to add additional items in the accordion
To reorder accordion sections, drag and drop using the icon next to the title.

Accessibility considerations

Authors:

Prioritize user flow and information hierarchy when deciding on accordion placement.
Consider creating subpages if the number of accordions on a page is excessive or multiple paragraphs are included in accordion.
Make sure accordion titles give a clear idea of what's inside and that each one is unique.

Developers:

Each accordion should be
Enter, Space, or tap should expand or collapse the accordion
The title should function as a button, not just the accordion icon.
Interactive elements within the accordion should integrate into the tab order automatically
Accordions expand and collapse actions operate independently. Opening one accordion should not close another.

Keyboard navigation

Keys	Action
Space or Enter	Expand and collapse the section.
Tab	Moves focus to the next focusable element.
Shift + Tab	Moves focus to the previous focusable element.

Web Coordinator Checklist

Maintain a consistent visual style across accordions for a cohesive design.
Ensure proper padding and spacing for readability.
Should be concise, clear, meaningful, and descriptive.
Follow text best practices:
- Use bold for emphasis, not for headings/subheadings.
- Use italics sparingly for subtle emphasis.
- Avoid underlining to prevent confusion with hyperlinks.
- Use the justify button to adjust content alignment when needed.
Use "Lists" button for bulleted lists and numbered lists.
- Bulleted lists enhance readability and content organization.
- Numbered lists are ideal for itemized content.
- Utilize the "Indent" buttons under Lists for sub-bullets or numbered items.
Use the Link button to link up a page
- When selecting an internal page within TxDOT.gov, be sure to use the path picker to choose the path of the page.
- When linking to an external link, use the dropdown and select “New Tab”.
Use the Paragraph button to select h2-h6 accordingly for headings and subheadings within the Accordion.