Accordion Component

The Accordion component provides a way to toggle the visibility of content sections. Axiom01 leverages the native HTML <details> and <summary> elements for this, requiring no custom JavaScript for basic functionality. This approach ensures maximum accessibility, browser compatibility, and simplicity.

Live Example

Accordion 1

HTML5 is the latest version of Hypertext Markup Language...

Accordion 2

HTML5 is the latest version of Hypertext Markup Language...

Accordion 3

And here's some amazing placeholder content. This is the last item's accordion body. Nothing more, nothing less.

Usage

To create an accordion, simply use the native HTML <details> and <summary> elements. The <summary> element acts as the clickable header, and the content following it within the <details> tag will be toggled.

Axiom01 provides minimal CSS to style these native elements for a consistent look and feel, including a custom chevron icon and basic spacing.

Code Example

<div>
  <details>
<summary>Accordion 1</summary>
<div>
  <p>HTML5 is the latest version of Hypertext Markup Language...</p>
</div>
  </details>
  <details>
<summary>Accordion 2</summary>
<div>
  <p>HTML5 is the latest version of Hypertext Markup Language...</p>
</div>
  </details>
  <details>
<summary>Accordion 3</summary>
<div>
  <p>And here's some amazing placeholder content. This is the last item's accordion body. Nothing more, nothing less.</p>
</div>
  </details>
</div>

Accessibility

The native <details> and <summary> elements are inherently accessible. They provide built-in keyboard navigation (Space/Enter to toggle) and semantic meaning for assistive technologies without any additional ARIA attributes or JavaScript.

Customization

You can customize the appearance of the accordion using standard CSS. Target the details and summary elements directly, or wrap them in a custom class for more specific styling. For example, to change the chevron icon, you can override the summary::after pseudo-element.