Skip to content
Blueprint

Accordion

The accordion component is for displaying collapsible content.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<Accordion.Root>
  <Accordion.Summary>
    <h2 class="text-lg">Lorem ipsum dolor sit amet</h2>
  </Accordion.Summary>
  <Accordion.Content>
    <p><strong>Lorem ipsum dolor</strong> <a href="#">sit amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </Accordion.Content>
</Accordion.Root>

Anatomy

This component is comprised of several elements that work together to create an accordion. The following are the elements that make up the Accordion component.

---
import Accordion from '@/components/elements/accordion/Accordion.ts'
---


<Accordion.Root>
  <Accordion.Summary />
  <Accordion.Content />
</Accordion.Root>

API Reference

Root

The root element of the Accordion component. This element wraps the summary and content elements.

Summary

The summary is the element that is always visible and is used to trigger the accordion to open and close. This component is based on the <summary> element and can take in any additional HTML attributes. The following are the custom props that can be passed to the component.

Prop Type Default
hideMarker
boolean false

Content

The content is the element that is hidden by default and is shown when the accordion is opened. By default, this component is based on the <div> element but can be changed to any HTML element by adjusting the as property.

Prop Type Default
as
TagType div

Accessibility

The <Accordion> component leverages the <details> and <summary> elements which are natively accessible. The following are some additional accessibility features that are built into the component:

  • The <summary> element has both a hover and focus state that can be styled to indicate that it is interactive for both keyboard and mouse users.

Examples

Custom Summary & Content

You can customize the summary and content elements to fit the needs of your project. In this example, we have replaced the marker in the summary and provided an image as the content.

Lorem ipsum dolor sit amet

Expand
a snow covered field with trees and mountains in the background 
<Accordion.Root>
  <Accordion.Summary hideMarker>
    <h2 class="text-lg">Lorem ipsum dolor sit amet</h2>
    <div class="btn-contained group-open/details:hidden group-focus-visible/summary:ring-4">Expand</div>
    <div class="btn-contained hidden group-open/details:flex group-focus-visible/summary:ring-4">Collapse</div>
  </Accordion.Summary>
  <Accordion.Content as="img" src="https://plus.unsplash.com/premium_photo-1675629118284-c9eb039df8cd?q=80&w=2576&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="a snow covered field with trees and mountains in the background" class="w-full object-cover"/>
</Accordion.Root>

Accordion List

Accordions can be stacked to display a list of items that can be expanded and collapsed.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<Accordion.Root>
  <Accordion.Summary>
    <h2 class="text-lg">Lorem ipsum dolor sit amet</h2>
  </Accordion.Summary>
  <Accordion.Content>
    <p><strong>Lorem ipsum dolor</strong> <a href="#">sit amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </Accordion.Content>
</Accordion.Root>
<Accordion.Root>
  <Accordion.Summary>
    <h2 class="text-lg">Lorem ipsum dolor sit amet</h2>
  </Accordion.Summary>
  <Accordion.Content>
    <p><strong>Lorem ipsum dolor</strong> <a href="#">sit amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </Accordion.Content>
</Accordion.Root>
<Accordion.Root>
  <Accordion.Summary>
    <h2 class="text-lg">Lorem ipsum dolor sit amet</h2>
  </Accordion.Summary>
  <Accordion.Content>
    <p><strong>Lorem ipsum dolor</strong> <a href="#">sit amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </Accordion.Content>
</Accordion.Root>

Astro Component

It’s recommended that an element like this is made as a reusable component. In this case, we have put together the following Astro compound component to serve as a blueprint for how you could possibly set up an Accordion component, and what properties to consider.

Accordion.ts
import Root from './Root.astro'
import Summary from './Summary.astro'
import Content from './Content.astro'


export default Object.assign({ Root, Summary, Content })