Accordion

An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
Overview API

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. 


  <base-accordion>
    <accordion-item heading="Title 1">
      <p class="text-body-large">
        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.
      </p>
    </accordion-item>
    <accordion-item heading="Title 2">
      <p class="text-body-large">
        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.
      </p>
    </accordion-item>
    <accordion-item heading="Title Disabled" disabled="true">
      <p class="text-body-large">
        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.
      </p>
    </accordion-item>
  </base-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. 


  <base-accordion allow-multiple="true">
    <accordion-item heading="Title 1">
      <p class="text-body-large">
        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.
      </p>
    </accordion-item>
    <accordion-item heading="Title 2">
      <p class="text-body-large">
        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.
      </p>
    </accordion-item>
    <accordion-item heading="Title Disabled" disabled="true">
      <p class="text-body-large">
        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.
      </p>
    </accordion-item>
  </base-accordion>

On this page

UsageMultiple

Properties

Events

Methods

CSS Custom Properties