Your browser is unsupported

We recommend using the latest version of IE11, Edge, Chrome, Firefox or Safari.

Accordion Component

The Accordion component is an excellent way to organize content when you need to have numerous Text Blocks or Tables on a single page. It hides the content until the visitor clicks on the Accordion and reveals the embedded text or table. It keeps the page looking concise and doesn’t create a density of text for the visitor.

See an example of accordions in use.

Each Accordion section can include these components within them:

  • Text Block
  • Table
  • Tablepress
  • Multi-column text
  • Highlight Events
  • Highlight Directory

Accessibility Requirements Heading link

The Accordion component has a required Title and section titles that can be hidden from view. It is important to understand how even a hidden title field can affect accessibility.

On a web page, section headings with large or bold text can help visual users quickly scan and understand web pages for efficient navigation. Screen readers can also scan headings, even when hidden visually.

Titles should be descriptive and must be unique within the page.

These measures allow the users of assistive technologies to:

  • allow search engines to detect the page’s main topics
  • understand different sections of related content
  • navigate quickly to any specific section
  • allow search engines to detect the page’s main topics