Accordion

Collapsible sections via native <details> and <summary>. No JavaScript.

ASW styles the native <details> element as an accordion. No class, no wrapper, no script. The browser handles open/close state; CSS handles the chevron rotation and transition. Fully accessible by default — keyboard operable, works with screen readers.

Basic accordion

A single <details> with a <summary> trigger. Any content inside — paragraphs, lists, code — collapses behind the summary.

<details>
  <summary>What is ASW?</summary>
  <p>A standalone CSS framework for agent-generated web content.</p>
</details>

Live demo

What is ASW?

A standalone CSS framework for agent-generated web content. Semantic HTML + data-attributes. Zero classes. One file.

Who is it for?

LLMs and agents generating HTML. Also humans who prefer writing semantic markup over wrestling with class names.

Open by default

Add the open attribute to show a section expanded on load. The user can still collapse it.

Grouped accordion

Place multiple <details> elements adjacent to each other for a grouped appearance. Each operates independently — no JavaScript "close others" behaviour. All can be open simultaneously, which is the correct semantic default.

<details>
  <summary>Section one</summary>
  <p>Content here.</p>
</details>
<details>
  <summary>Section two</summary>
  <p>More content.</p>
</details>

Installation

Add one <link> tag to your document head. No npm, no build step.

<link rel="stylesheet" href="/agentic.css">

Usage

Write semantic HTML. ASW styles it. Use data-* attributes for layout patterns and variants. No classes required.

Customisation

Override CSS custom properties to change colours, spacing, and typography. The full token list is in Design Tokens.

In navigation — dropdown

A <details> inside a <nav> list item becomes a dropdown menu. The chevron animation is suppressed; a standard ▼ indicator replaces it. The dropdown floats below the trigger and closes when focus leaves.

<nav>
  <ul><li><a href="/"><strong>Brand</strong></a></li></ul>
  <ul>
    <li><a href="/asw/docs/">Docs</a></li>
    <li>
      <details>
        <summary>More</summary>
        <ul>
          <li><a href="/about/">About</a></li>
          <li><a href="/contact/">Contact</a></li>
        </ul>
      </details>
    </li>
  </ul>
</nav>

See the Navigation — Top nav page for a live demo and full documentation of the dropdown pattern.

Design tokens

Two tokens control accordion appearance:

Token	Default	Controls
`--asw-accordion-border`	`var(--asw-border)`	Border colour (reserved — not currently rendered)
`--asw-accordion-active-color`	`var(--asw-accent-hover)`	Summary text colour on focus

The chevron is rendered as ▸ (U+25B8), rotated via CSS. Its colour is --asw-text-muted. The summary trigger colour is --asw-accent.

Accessibility

The native <details>/<summary> pattern provides built-in keyboard accessibility. No role or aria-* attributes required for basic use.

Enter or Space on the summary toggles open/close.
The open state is reflected in the DOM via the open attribute — observable by assistive technology.
Screen readers announce the summary as a button with expanded/collapsed state.

For complex content inside accordions (forms, interactive controls), ensure that content is logically ordered in the DOM — the collapsed state only hides content visually, it remains in the accessibility tree in some browsers.

← Previous Tables Next → Figure