Accordion

Blocks that open and close. Built on details and summary, so it works without JavaScript.

Edit page

Example

Is Avior free?

Yes. It is open source under the MIT licence, for personal and client work.

Does it need a backend?

No. The build is a folder of static files for any host.

Can I use it with an AI agent?

Yes. AGENTS.md tells the agent how the system is meant to be used.

Example.jsx

import { Accordion } from './components/Accordion'

<Accordion items={[
  { title: 'Is it free?', body: <p>Yes, under the MIT licence.</p>, open: true },
  { title: 'Does it need a backend?', body: <p>No.</p> },
]} />

Markup

The component writes plain HTML. Without React it is the same markup:

Is Avior free?

Yes.

index.html

<div class="accordion">
  <details class="accordion-item" open>
    <summary class="accordion-head">Is Avior free?</summary>
    <div class="accordion-body">Yes.</div>
  </details>
</div>

Parts

Class	What it is
`accordion`	a column of items with a gap
`accordion-item`	one details element, bordered
`accordion-head`	the summary: the question and the arrow
`accordion-body`	the answer, muted

Variables

Variable	Default	What it sets
`$accordion-gap`	`8px`	space between items
`$accordion-padding`	`16px 20px`	padding of the head
`$accordion-radius`	`12px`	corner radius
`$accordion-line`	`var(--line)`	border colour
`$accordion-background`	`var(--page)`	background