Demo 2: Accordion (Aria Toggles)

TL;DR

These aria toggles target an element by ID and toggle an aria attribute.

Demo (by Adam Argyle)

Establish a toggle: Content for “Establish a toggle”
Toggle item visibility: Content for “Toggle item visibility”
Style the summary: Content for “Style the summary”

Source

HTML

<dl class="accordion">
  <dt aria-toggleValueForAttribute="hidden" aria-toggleFor="accordion-item-1">
    Establish a toggle
  </dt>
  <dd id="accordion-item-1" aria-hidden="false">
    Content for “Establish a toggle”
  </dd>

  <dt aria-toggleValueForAttribute="hidden" aria-toggleFor="accordion-item-2">
    Toggle item visibility
  </dt>
  <dd id="accordion-item-2"  aria-hidden="true">
    Content for “Toggle item visibility”
  </dd>

  <dt aria-toggleValueForAttribute="hidden" aria-toggleFor="accordion-item-3">
    Style the summary
  </dt>
  <dd id="accordion-item-3"  aria-hidden="true">
    Content for “Style the summary”
  </dd>
</dl>

CSS

@layer demo.accordion {
  .accordion > dt {
    cursor: pointer;
    display: list-item;
  }
  .accordion > dt:has(+ dd[aria-hidden="false"]) {
    list-style-type: '👇🏽';
  }
  .accordion > dt:has(+ dd[aria-hidden="true"]) {
    list-style-type: '👉🏽';
  }

  .accordion > dd[aria-hidden="true"] {
    block-size: 0;
    overflow: clip;
  }
}