Home Components Accordion
Accordion
Overview Playground API

The accordion component delivers large amounts of content in a small space through progressive disclosure. The header title give the user a high level overview of the content allowing the user to decide which sections to read.

Accordions can make information processing and discovering more effective. However, it does hide content from users and it’s important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don’t use an accordion as it adds the burden of an extra click; instead use a full scrolling page with normal headers.
Usage
The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion. Accordions work especially well on mobile interfaces or whenever vertical space is at a premium. The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion. Accordions work especially well on mobile interfaces or whenever vertical space is at a premium. The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion. Accordions work especially well on mobile interfaces or whenever vertical space is at a premium. 

  <goat-accordion>
    <goat-accordion-item heading="Title 1">
      <goat-text>
        The accordion component delivers large amounts of content in a small space through progressive
        disclosure.
        The user gets key details about the underlying content and can choose to expand that content
        within the
        constraints of the accordion.
        Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.
      </goat-text>
    </goat-accordion-item>
    <goat-accordion-item heading="Title 2">
      <goat-text>
        The accordion component delivers large amounts of content in a small space through progressive
        disclosure.
        The user gets key details about the underlying content and can choose to expand that content
        within the
        constraints of the accordion.
        Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.
      </goat-text>
    </goat-accordion-item>
    <goat-accordion-item heading="Title Disabled" disabled="true">
      <goat-text>
        The accordion component delivers large amounts of content in a small space through progressive
        disclosure.
        The user gets key details about the underlying content and can choose to expand that content
        within the
        constraints of the accordion.
        Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.
      </goat-text>
    </goat-accordion-item>
  </goat-accordion>
Multiple

A user can independently expand each section of the accordion allowing for multiple sections to be open at once.

The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion. Accordions work especially well on mobile interfaces or whenever vertical space is at a premium. The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion. Accordions work especially well on mobile interfaces or whenever vertical space is at a premium. The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion. Accordions work especially well on mobile interfaces or whenever vertical space is at a premium. 

  <goat-accordion multiple="true">
    <goat-accordion-item heading="Title 1" disabled="false">
      <goat-text>
        The accordion component delivers large amounts of content in a small space through progressive disclosure.
        The user gets key details about the underlying content and can choose to expand that content within the
        constraints of the accordion.
        Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.
      </goat-text>
    </goat-accordion-item>
    <goat-accordion-item heading="Title 2" disabled="false">
      <goat-text>
        The accordion component delivers large amounts of content in a small space through progressive disclosure.
        The user gets key details about the underlying content and can choose to expand that content within the
        constraints of the accordion.
        Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.
      </goat-text>
    </goat-accordion-item>
    <goat-accordion-item heading="Title Disabled" disabled="true">
      <goat-text>
        The accordion component delivers large amounts of content in a small space through progressive disclosure.
        The user gets key details about the underlying content and can choose to expand that content within the
        constraints of the accordion.
        Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.
      </goat-text>
    </goat-accordion-item>
  </goat-accordion>
Usage Multiple
Work in progress
Properties
Events
Methods
CSS Custom Properties
Previous Next