# accordion — Examples

## basic

```html
<accordion-ui>
  <accordion-item-ui text="What is AdiaUI?">
    <p>AdiaUI is a zero-dependency vanilla JS web component library for building modern interfaces. It uses native custom elements, OKLCH colors, and @scope CSS isolation.</p>
  </accordion-item-ui>
  <accordion-item-ui text="Do I need a build tool?">
    <p>No. AdiaUI components are plain ES modules. Import them directly in a script tag or from a module bundler -- both work without configuration.</p>
  </accordion-item-ui>
  <accordion-item-ui text="How are styles scoped?">
    <p>Each component uses CSS @scope blocks keyed to the element tag name. This provides isolation without Shadow DOM, keeping components inspectable in DevTools.</p>
  </accordion-item-ui>
</accordion-ui>
```

## multiple

```html
<accordion-ui multiple>
  <accordion-item-ui text="Section A" open>
    <p>This section starts open and remains open when you expand other sections.</p>
  </accordion-item-ui>
  <accordion-item-ui text="Section B">
    <p>Open this alongside Section A to see multiple open behavior.</p>
  </accordion-item-ui>
  <accordion-item-ui text="Section C">
    <p>All three can be expanded at the same time.</p>
  </accordion-item-ui>
</accordion-ui>
```

## pre-opened

```html
<accordion-ui>
  <accordion-item-ui text="Closed by default">
    <p>This item is collapsed initially.</p>
  </accordion-item-ui>
  <accordion-item-ui text="Open by default" open>
    <p>This item renders expanded because it has the open attribute.</p>
  </accordion-item-ui>
  <accordion-item-ui text="Also closed">
    <p>Another collapsed item.</p>
  </accordion-item-ui>
</accordion-ui>
```
