Mark · Components

Accordion

Stacked sections that open one at a time. This one wears the engine's own classes — accordion and its parts — because Bootstrap's accordion is already right: the toggle is a real button, its state lives in aria-expanded, and the panel is the thing the button points at. There was nothing to correct.

Default

Full page preview ↗

A file that renders one thing and declares the fields it accepts. The markup an editor fills in and the markup a page renders are the same file, so they cannot drift apart.

The examples: block in each partial's frontmatter. This page renders them live — nothing here is a screenshot or a copy of the real component.

Yes. A partial is a convenience, not a gate: hand-composed pages pass their own HTML and render exactly as written.

<div class="accordion" id="accordion-demo">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-demo-panel-1" aria-expanded="true" aria-controls="accordion-demo-panel-1">What is a partial?</button>
    </h3>
    <div id="accordion-demo-panel-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-demo">
      <div class="accordion-body">
        <p>A file that renders one thing and declares the fields it accepts. The markup an editor fills in and the markup a page renders are the same file, so they cannot drift apart.</p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-demo-panel-2" aria-expanded="false" aria-controls="accordion-demo-panel-2">Where do the demos come from?</button>
    </h3>
    <div id="accordion-demo-panel-2" class="accordion-collapse collapse" data-bs-parent="#accordion-demo">
      <div class="accordion-body">
        <p>
          The
          <code>examples:</code>
          block in each partial's frontmatter. This page renders them live — nothing here is a screenshot or a copy of the real component.
        </p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-demo-panel-3" aria-expanded="false" aria-controls="accordion-demo-panel-3">Can a page use its own markup instead?</button>
    </h3>
    <div id="accordion-demo-panel-3" class="accordion-collapse collapse" data-bs-parent="#accordion-demo">
      <div class="accordion-body">
        <p>Yes. A partial is a convenience, not a gate: hand-composed pages pass their own HTML and render exactly as written.</p>
      </div>
    </div>
  </div>
</div>
id: accordion-demo
items: [3 items]

Flush

Full page preview ↗

Cotton canvas, brass hardware, waxed thread.

Ships in two business days. Free over $75.

Thirty days, unworn, receipt or order number.

<div class="accordion accordion-flush" id="accordion-flush-demo">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-flush-demo-panel-1" aria-expanded="false" aria-controls="accordion-flush-demo-panel-1">Materials</button>
    </h3>
    <div id="accordion-flush-demo-panel-1" class="accordion-collapse collapse" data-bs-parent="#accordion-flush-demo">
      <div class="accordion-body">
        <p>Cotton canvas, brass hardware, waxed thread.</p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-flush-demo-panel-2" aria-expanded="false" aria-controls="accordion-flush-demo-panel-2">Shipping</button>
    </h3>
    <div id="accordion-flush-demo-panel-2" class="accordion-collapse collapse" data-bs-parent="#accordion-flush-demo">
      <div class="accordion-body">
        <p>Ships in two business days. Free over $75.</p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-flush-demo-panel-3" aria-expanded="false" aria-controls="accordion-flush-demo-panel-3">Returns</button>
    </h3>
    <div id="accordion-flush-demo-panel-3" class="accordion-collapse collapse" data-bs-parent="#accordion-flush-demo">
      <div class="accordion-body">
        <p>Thirty days, unworn, receipt or order number.</p>
      </div>
    </div>
  </div>
</div>
id: accordion-flush-demo
flush: true
items: [3 items]

Several open at once

Full page preview ↗

Opening this one leaves the others alone.

So a reader can compare two panels side by side.

Useful for reference material; wrong for a wizard.

<div class="accordion" id="accordion-open-demo">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-open-demo-panel-1" aria-expanded="true" aria-controls="accordion-open-demo-panel-1">First</button>
    </h3>
    <div id="accordion-open-demo-panel-1" class="accordion-collapse collapse show">
      <div class="accordion-body">
        <p>Opening this one leaves the others alone.</p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-open-demo-panel-2" aria-expanded="true" aria-controls="accordion-open-demo-panel-2">Second</button>
    </h3>
    <div id="accordion-open-demo-panel-2" class="accordion-collapse collapse show">
      <div class="accordion-body">
        <p>So a reader can compare two panels side by side.</p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-open-demo-panel-3" aria-expanded="false" aria-controls="accordion-open-demo-panel-3">Third</button>
    </h3>
    <div id="accordion-open-demo-panel-3" class="accordion-collapse collapse">
      <div class="accordion-body">
        <p>Useful for reference material; wrong for a wizard.</p>
      </div>
    </div>
  </div>
</div>
id: accordion-open-demo
always_open: true
items: [3 items]
Fields (6)
FieldTypeNotes
id text Distinct per accordion when a page carries more than one — it wires each button to its panel
flush boolean Drop the outer border and radius so it sits edge-to-edge in its container (Bootstrap's own `accordion-flush`)
always_open boolean Opening one stops closing the others
heading_level number The level each panel's title takes in the document outline — 2 if the accordion is a page's own section
class_names text
items repeater
On this page