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

Sizes

The Accordion comes in three sizes: small, medium, and large. We recommend medium for most use cases, but use whichever size best fits your UI’s needs.

Types

The Accordion offers two container types: card and flush to fit different use cases.

Card

The card variant is the default and recommended type. It creates a visual separation between accordion sections and other UI elements, organizes blocks of content, and distinguishes between sections within tabs.

Flush

Use the flush variant where space is limited such as within a Card, Flyout, or sidebar.

Toggle

Toggle type

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

Interactive

Use this variant only when you need to put interactive elements such as a button or a link within the toggle area. Avoid placing complex elements that may compromise the usability and accessibility of the component.

Set contains-interactive when nesting interactive content in the toggle, so that only the chevron toggles the item. This lets users using assistive technology access and interact with the nested element.

When using this, apply it to all items. Avoid mixing with default toggles.

Static

A static item has no toggle at all: it stays in the state it was given, open or closed. This is useful when you want to show important information in the Accordion that should always stay open or closed, making it stand out as different from the other items.

This example shows a static item used to prevent interaction with a skipped step in a triggered Terraform run.

Content type

Content type supports any content: text, your own elements or i80 elements, written inside the item.

Nesting Accordions

Nesting Accordions can help organize complex content, but should be used in moderation, and is only recommended for the flush variant.

Composition with other components

Expand and collapse all accordions

By composing the Accordion with other I80 components, you can provide users with a way to expand and collapse all AccordionItems at once. Expanding all AccordionItems allows users to view and compare content easily, while collapsing provides a summary and reduces cognitive load.

We recommend using a secondary Button above the Accordion, aligned to the right. A tertiary Button can be used if less prominence is needed. Use the small variant of the Button for any size variant of the Accordion.

To ensure consistency across all products, use “Expand all” / “Collapse all” as the Button label and the unfold-open and unfold-close icons in the leading position.

Note that if an AccordionItem is static, the expand/collapse all feature will not affect its behavior.

How to use this component

The <i80-accordion> element is used to wrap and group one or more <i80-accordion-item> children. Each item consists of a “toggle” and a “content” part, containing plain text or HTML content: the toggle is the heading attribute or a child with slot="toggle", and the rest of the item is the content.

Size

A different size of Accordion can be set with the size attribute.

<i80-accordion size="large">
  <i80-accordion-item heading="Item one">Additional content for item one</i80-accordion-item>
  <i80-accordion-item heading="Item two">Additional content for item two</i80-accordion-item>
</i80-accordion>

Type

Use the type attribute to render a flush Accordion.

<i80-accordion type="flush">
  <i80-accordion-item heading="Item one">Additional content for item one</i80-accordion-item>
  <i80-accordion-item heading="Item two">Additional content for item two</i80-accordion-item>
</i80-accordion>

Complex HTML content

With an Alert component in the toggle — an element with slot="toggle" — and an HTML table in the content.

<i80-accordion>
  <i80-accordion-item open>
    <i80-alert slot="toggle" type="compact" color="success" heading="Title">Plan finished <small>22 days ago</small></i80-alert>
    <p class="i80-typography-body-200">
      <strong>Queued:</strong> 9 days ago &gt; <strong>Finished:</strong> 9 days ago
    </p>
    <i80-table caption="Example table">
      <table>
        <thead>
          <tr><th>Name</th><th>Type</th><th>Value</th></tr>
        </thead>
        <tbody>
          <tr><td>Cell one A</td><td>Cell two A</td><td>Cell three A</td></tr>
          <tr><td>Cell one B</td><td>Cell two B</td><td>Cell three B</td></tr>
        </tbody>
      </table>
    </i80-table>
  </i80-accordion-item>
</i80-accordion>

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

<i80-accordion>
  <i80-accordion-item contains-interactive open>
    <div slot="toggle" class="i80-typography-body-300">
      Text inside a nested div with <a href="https://i80.dk">a link</a>.
    </div>
    <i80-text-input label="Email" type="email" name="email"></i80-text-input>
    <i80-button>Submit</i80-button>
  </i80-accordion-item>
</i80-accordion>

With an Accordion in the content.

<i80-accordion type="flush">
  <i80-accordion-item heading="Item one" open>
    <i80-accordion type="flush">
      <i80-accordion-item heading="Nested item one">Nested content one</i80-accordion-item>
      <i80-accordion-item heading="Nested item two">Nested content two</i80-accordion-item>
    </i80-accordion>
  </i80-accordion-item>
</i80-accordion>

Accessible name

The aria-label value is applied to the HTML button which controls visibility of the content. The text does not display in the UI. You can set a custom value useful for translated text for example. If not provided, the accessible name is taken from the toggle content via aria-labelledby.

<i80-accordion>
  <i80-accordion-item heading="Elemento uno" aria-label="Mostrar u ocultar">
    Contenido adicional para el elemento uno
  </i80-accordion-item>
</i80-accordion>

Heading level

The title-tag attribute changes the HTML element that wraps the title of each <i80-accordion-item>. When organizing the content on a webpage, the heading levels should reflect the structure of the page. For example, if an Accordion is within a subsection of the page below a heading level 2, the value should be "h3".

<h2 class="i80-text i80-typography-display-300 i80-font-weight-semibold">Examination period</h2>
<i80-accordion>
  <i80-accordion-item title-tag="h3" heading="Exam experience">
    All certification exams are taken online with a live proctor, accommodating all locations and time zones. Online
    proctoring provides the same benefits of a physical test center while being more accessible to exam-takers. The
    live proctor verifies your identity, walks you through rules and procedures, and watches you take the exam. Learn
    more ways to prepare for an online proctored exam in our Knowledgebase.
  </i80-accordion-item>
  <i80-accordion-item title-tag="h3" heading="Requirements for attending an exam">
    Before you register for an exam, review the Exam-taker Handbook to learn the requirements and policies for taking
    exams. It is your responsibility to know and abide by our program rules to successfully enter your exam
    appointment, failure to do so may result in forfeiture of appointment fees.
  </i80-accordion-item>
  <i80-accordion-item title-tag="h3" heading="Your badge and certificate">
    i80 has partnered with Credly to offer you a digital badge and downloadable certificate upon passing a
    certification exam. There is no fee for this service and acceptance is up to you. Digital badges can be used in
    email signatures or digital resumes, and on social media sites such as LinkedIn, Facebook, and Twitter. Badges
    link back to a real-time verification feature that describes your qualifications.
  </i80-accordion-item>
</i80-accordion>

Open on page load

Add the open attribute to an <i80-accordion-item> to display its associated content on page load instead of initially hiding it.

<i80-accordion>
  <i80-accordion-item heading="Item one" open>
    Additional content for item one which is displayed on page load
  </i80-accordion-item>
  <i80-accordion-item heading="Item two">
    Additional content for item two which is hidden on page load
  </i80-accordion-item>
</i80-accordion>

Interactive content in the toggle

By default, an item has no contains-interactive attribute, meaning that the entire item toggle can be clicked to hide and show the associated content. Add contains-interactive to an <i80-accordion-item> and only the chevron button of the item is clickable vs. the entire block. This allows you to add other interactive content inside the toggle if desired.

<i80-accordion>
  <i80-accordion-item contains-interactive>
    <div slot="toggle" style="display: flex; align-items: center; gap: 16px; justify-content: space-between">
      <i80-alert type="compact" color="success" heading="Title">Plan finished <small>22 days ago</small></i80-alert>
      <i80-button color="secondary" size="small">Details</i80-button>
    </div>
    Additional content for item one
  </i80-accordion-item>
  <i80-accordion-item contains-interactive>
    <div slot="toggle" style="display: flex; align-items: center; gap: 16px; justify-content: space-between">
      <span>Peering connection log results</span>
      <i80-link-standalone href="https://i80.dk" icon="external-link" icon-position="trailing">Details</i80-link-standalone>
    </div>
    Additional content for item two
  </i80-accordion-item>
</i80-accordion>

Attributes

<i80-accordion> renders this component. Everything it understands:

The tag keeps any native element you write inside it, so a server-rendered form, link or button works as it is. See Web Components for loading i80.js and the reference for these examples running.

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.

With contains-interactive on an <i80-accordion-item>, only the chevron is the toggle button, so focus moves to it first and then on to the interactive elements you put 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.

0.1.0

Første i80-version (fork af upstream, se core/UPSTREAM.md).