Accordion

The accordion is used to show and hide multiple sections of content in a stacked manner. Each section is represented by a toggle.

Usage

When to use

• To show content as needed while keeping the UI organized and visually manageable.
• To hide long pieces of content with a similar structure.

When not to use

• To hide basic non-critical information to users. Instead, consider using a Reveal.
• To allow users switch between different content within the same context. Instead, consider using Tabs.

Accordion vs Reveal

While similar in functionality and interaction, the Accordion and Reveal are meant to be used in different scenarios and use cases.

When to use the Accordion

• You have multiple sections of content that can be expanded or collapsed.

• Each section of content has its own toggle content, giving users the ability to access specific sections.

• Users need to navigate through different sections of content and selectively expand or collapse sections

• There is a sequential or hierarchical relationship between the different sections.

When to use the Reveal

• You have a single piece of content that can be expanded to collapsed to reveal additional details or information.

• The content within the toggle is plain text.

• The content within the reveal is relatively short and simple.

• There is no need for multiple independent sections or hierarchical relationship between different sections.

Usage examples

Toggle content

The toggle accepts many different types of content, from text-based content to nested HDS components or custom content.

Generic content

Interactive content

Use containsInteractive when nesting interactive content in the toggle. This lets users using assistive technology, access and interact with the nested element.

When using this property, it should be applied to all items. Avoid mixing with default toggles.

Content type

The content supports any custom content, local components, or Helios components via an instance swap property (customInstance) in Figma. In code, yield is supported.

Default

Custom

How to use this component

The Accordion component is used to wrap and group together one or more AccordionItem child components. The Accordion items consist of “toggle” and “content” named blocks which can contain either plain text or HTML content.

Plain text content

  <Hds::Accordion as |A|>
    <A.Item>
      <:toggle>Item one</:toggle>
      <:content>
        Additional content for item one
      </:content>
    </A.Item>
    <A.Item>
      <:toggle>Item two</:toggle>
      <:content>
        Additional content for item two
      </:content>
    </A.Item>
  </Hds::Accordion>

Complex HTML content

With an Alert component in the toggle block and an HTML table in the content block.

  <Hds::Accordion as |A|>
    <A.Item @isOpen={{true}}>
      <:toggle>
        <Hds::Alert @type="compact" @color="success" as |A|>
          <A.Title>Title</A.Title>
          <A.Description>Plan finished <small>22 days ago</small></A.Description>
        </Hds::Alert>
      </:toggle>
      <:content>
        <p class="hds-typography-body-200">
          <strong>Queued:</strong>
          9 days ago >
          <strong>Finished:</strong>
          9 days ago
        </p>
        <Hds::Table @caption="Example table">
          <:head as |H|>
            <H.Tr>
              <H.Th>Name</H.Th>
              <H.Th>Type</H.Th>
              <H.Th>Value</H.Th>
            </H.Tr>
          </:head>
          <:body as |B|>
            <B.Tr>
              <B.Td>Cell one A</B.Td>
              <B.Td>Cell two A</B.Td>
              <B.Td>Cell three A</B.Td>
            </B.Tr>
            <B.Tr>
              <B.Td>Cell one B</B.Td>
              <B.Td>Cell two B</B.Td>
              <B.Td>Cell three B</B.Td>
            </B.Tr>
          </:body>
        </Hds::Table>
      </:content>
    </A.Item>
  </Hds::Accordion>

With a link in the toggle block and a form in the content.

  <Hds::Accordion as |A|>
    <A.Item @containsInteractive={{true}} @isOpen={{true}}>
      <:toggle>
        <div class="hds-typography-body-300">
          Text inside a nested div with <a href="https://www.hashicorp.com/">a link</a>.
        </div>
      </:toggle>
      <:content>
        <p>
          <Hds::Form::TextInput::Field @type="email" as |F|>
            <F.Label>Email</F.Label>
          </Hds::Form::TextInput::Field>
        </p>
        <Hds::Button @text="Submit" />
      </:content>
    </A.Item>
  </Hds::Accordion>

ariaLabel

The ariaLabel value is applied to the HTML button which controls visibility of the content block. The text does not display in the UI. The default value is "Toggle display" but you can set a custom value which is useful for translated text for example.

  <Hds::Accordion as |A|>
    <A.Item @ariaLabel="Mostrar u ocultar">
      <:toggle>Elemento uno</:toggle>
      <:content>
        Contenido adicional para el elemento uno
      </:content>
    </A.Item>
  </Hds::Accordion>

isOpen

Set isOpen to true on an AccordionItem to display its associated content on page load instead of initially hiding it.

  <Hds::Accordion as |A|>
    <A.Item @isOpen={{true}}>
      <:toggle>Item one</:toggle>
      <:content>
        Additional content for item one which is displayed on page load
      </:content>
    </A.Item>
    <A.Item>
      <:toggle>Item two</:toggle>
      <:content>
        Additional content for item two which is hidden on page load
      </:content>
    </A.Item>
  </Hds::Accordion>

containsInteractive

By default, the containsInteractive property of the AccordionItem is set to false, meaning that the entire AccordionItem toggle block can be clicked to hide and show the associated content. If set to true only the chevron button of the AccordionItem is clickable vs. the entire block. This allows you to add other interactive content inside the toggle block if desired.

<Hds::Accordion as |A|>
  <A.Item @containsInteractive={{true}}>
    <:toggle>
      <div class="doc-accordion-item-toggle-content-flex-layout">
        <Hds::Alert @type="compact" @color="success" as |A|>
          <A.Title>Title</A.Title>
          <A.Description>Plan finished <small>22 days ago</small></A.Description>
        </Hds::Alert>
        <Hds::Button @text="Details" @color="secondary" @size="small" />
      </div>
    </:toggle>
    <:content>
      Additional content for item one
    </:content>
  </A.Item>
  <A.Item @containsInteractive={{true}}>
    <:toggle>
      <div class="doc-accordion-item-toggle-content-flex-layout">
        <span>Peering connection log results</span>
        <Hds::Link::Standalone @icon="external-link" @iconPosition="trailing" @text="Details" @href="https://www.hashicorp.com/" />
      </div>
    </:toggle>
    <:content>
      Additional content for item two
    </:content>
  </A.Item>
</Hds::Accordion>

Component API

Accordion

The base Accordion component serves only as a wrapper to group together one or more AccordionItem child components.

Contextual Components

[A].AccordionItem

Anatomy

States

Default

Is open

Contains interactive

Is open

Conformance rating

When used as recommended, there should not be any WCAG conformance issues with this component.

Keyboard navigation

Focus on a toggle.

Expand container to display hidden content.

Move to the first interactive element within the content area.

When containsInteractive, the focus will first move to the toggle button, then to the nested interactive elements in the toggle area.

Applicable WCAG Success Criteria

This section is for reference only. This component intends to conform to the following WCAG Success Criteria:

Support

If any accessibility issues have been found within this component, let us know by submitting an issue.