Accordion

<section ui-accordion>
  <button data-index="0" ref="trigger0">What is tiny-engine?</button>
  <div ref="panel0">A tiny UI runtime for declarative capsules.</div>

  <button data-index="1" ref="trigger1">Does it support TypeScript?</button>
  <div ref="panel1" hidden>Yes, it ships with typed APIs.</div>
</section>

import { UI, Capsule } from "tiny-engine-core";

class Accordion extends Capsule {
  constructor(el, options) {
    super(el, options);
    this.triggers = Array.from(this.el.querySelectorAll("button[data-index]"));
    this.panels = Array.from(this.el.querySelectorAll("div[ref^='panel']"));

    this.on(this.el, "click", (event) => {
      const trigger = event.target.closest("button[data-index]");
      if (!trigger) return;
      this.open(Number(trigger.dataset.index));
    });
  }

  open(index) {
    this.panels.forEach((panel, i) => panel.hidden = i !== index);
  }
}

UI.register("accordion", Accordion);
UI.init();