Skip to main content
Site Builder
Indiana University
Content Components

Accordion

Expand and collapse content in a block to reveal hidden details

Included on:

Overview

The accordion component creates collapsible panels that expand to reveal hidden content. It’s ideal for presenting dense or optional information in a compact, user-friendly format.

Common uses

  • Organize FAQs into expandable questions and answers
  • Present policies or guidelines in collapsible sections
  • Provide definitions or reference information that users may only need occasionally

Component example

  View in new window

Component fields

Element name Required Multiple
Heading level Sets the HTML heading level (H2, H3, etc.) for panel titles. Does not change the visual style, but ensures proper document structure.
Yes No
Header Optional. Short heading displayed above the accordion. Limit to a few words or a short phrase.
No No
Panel Group containing fields for a single accordion panel. Up to 10 panels are allowed.
Yes Yes
Open on page load? If checked, the panel opens by default when the page loads. Select this for only one panel per accordion.
No No
Title Title shown on the accordion panel. Limit to a few words.
Yes No
Content Collapsible panel content. Supports formatted text, lists, and links.
Yes No

Accessibility

  • Use clear and concise panel titles
    Screen reader users rely on panel titles to navigate quickly.
  • Use proper heading levels
    Match the heading level to the page’s overall structure (usually H2).
  • Limit the number of panels
    Too many panels can overwhelm users, especially those using assistive technology. Fewer, well-structured panels are better than splitting content into multiple large accordions.
  • Keep essential information out of accordion panels
    Avoid hiding essential information in accordion panels. Users may not expand all sections, especially when using assistive technology.

Do

  • Use to present optional or detailed information in a compact format (FAQs, policies, definitions)
  • Write clear and concise panel titles
  • Use links, short paragraphs, and light formatting in panel content
  • Ensure heading levels follow the page’s overall structure

Don't

  • Use for critical content or calls to action that must be seen without interaction
  • Use to make a long page appear shorter—consider splitting content into separate pages
  • Place images, tables, or other embedded media inside panels
  • Use for lists or step-by-step processes—use a list hub or timeline instead

Related content

  • Choosing Components

  • Learn to Use Site Builder