About Project Overview Contributing Getting Started Installation Usage Themes Customizing Frameworks React Vue Angular GitHub Light Dark System

Accordion

<terra-accordion> | TerraAccordion
Since 1.0 stable

A collapsible content panel for showing and hiding content.

A single, accessible accordion item for FAQs and expandable content. Supports a summary (via property or slot), smooth expand/collapse, keyboard accessibility, and custom content.

Usage

Use the summary property for a simple title, or the summary slot for custom summary content. Place the expandable content in the default slot.

Perseverance is studying Mars’ habitability, seeking signs of past microbial life, collecting and storing samples of selected rock and soil, and preparing for future human missions. 
<terra-accordion summary="Why is the rover called Perseverance?">
  Perseverance is studying Mars' habitability, seeking signs of past microbial life, collecting and storing samples of selected rock and soil, and preparing for future human missions.
</terra-accordion>

Examples

Using the summary property

Perseverance is studying Mars’ habitability, seeking signs of past microbial life, collecting and storing samples of selected rock and soil, and preparing for future human missions. 
<terra-accordion summary="What is Perseverance doing on Mars?">
  Perseverance is studying Mars' habitability, seeking signs of past microbial life, collecting and storing samples of selected rock and soil, and preparing for future human missions.
</terra-accordion>

Using the summary slot

How long is the 2020 mission? The 2020 Mars mission is planned to last at least one Mars year (about 687 Earth days). 
<terra-accordion>
  <span slot="summary">How long is the 2020 mission?</span>
  The 2020 Mars mission is planned to last at least one Mars year (about 687 Earth days).
</terra-accordion>

Multiple Accordions

Accordions stack nicely when used together, with consistent spacing between them.

Perseverance is studying Mars’ habitability, seeking signs of past microbial life, collecting and storing samples of selected rock and soil, and preparing for future human missions. The name “Perseverance” was chosen through a nationwide student contest. It reflects the determination and persistence required to explore Mars and advance our understanding of the Red Planet. The 2020 Mars mission is planned to last at least one Mars year (about 687 Earth days), with the possibility of extension based on the rover’s condition and scientific objectives. Perseverance carries seven scientific instruments, including cameras, spectrometers, a ground-penetrating radar, and the first microphone to record sounds on Mars. It also carries the Ingenuity helicopter, the first aircraft to fly on another planet. 
<terra-accordion summary="What is Perseverance doing on Mars?">
  Perseverance is studying Mars' habitability, seeking signs of past microbial life, collecting and storing samples of selected rock and soil, and preparing for future human missions.
</terra-accordion>

<terra-accordion summary="Why is the rover called Perseverance?">
  The name "Perseverance" was chosen through a nationwide student contest. It reflects the determination and persistence required to explore Mars and advance our understanding of the Red Planet.
</terra-accordion>

<terra-accordion summary="How long is the 2020 mission?">
  The 2020 Mars mission is planned to last at least one Mars year (about 687 Earth days), with the possibility of extension based on the rover's condition and scientific objectives.
</terra-accordion>

<terra-accordion summary="What instruments does Perseverance carry?">
  Perseverance carries seven scientific instruments, including cameras, spectrometers, a ground-penetrating radar, and the first microphone to record sounds on Mars. It also carries the Ingenuity helicopter, the first aircraft to fly on another planet.
</terra-accordion>

Features

  • Large, bold summary with chevron icon
  • Smooth expand/collapse animation
  • Keyboard accessible (Enter/Space to toggle)
  • Divider lines above and below
  • Customizable summary via slot or property

[component-metadata:terra-accordion]

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/accordion/accordion.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/accordion/accordion.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/accordion/accordion.js';

To import this component as a React component:

import TerraAccordion from '@nasa-terra/components/dist/react/accordion';

Slots

Name Description
(default) The default slot for accordion content.
summary The summary/header for the accordion (optional, overrides summary property)

Learn more about using slots.

Properties

Name Description Reflects Type Default
summary The summary/header for the accordion. Use the property for simple text, or the slot for custom content. string -
open Whether the accordion is open or not. This property is reflected as an attribute and can be controlled programmatically or by user interaction. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
terra-accordion-toggle onTerraAccordionToggle emitted when the accordion opens or closes -

Learn more about events.

Dependencies

This component automatically imports the following dependencies.

  • <terra-icon>