Tabs & Accordion

How to use

<div class="ar-tabs" data-ar-tabs-panel="data-ar-panel">
  <button class="ar-tab ar-tab-active" data-ar-tab="panel-1">One</button>
  <button class="ar-tab" data-ar-tab="panel-2">Two</button>
</div>
<div id="panel-1" data-ar-panel>Panel one</div>
<div id="panel-2" data-ar-panel>Panel two</div>

Accordion = native <details> + <summary> inside ar-accordion. Default allows multiple panels open; add data-ar-exclusive on the container for one-at-a-time.

Panel one content.

Accordion (multiple open)

What is ArekUI?

A dependency-free CSS framework extracted from a real design system.

Does it need a build step?

No. Link arekui.css and go.

How do I theme it?

Set data-theme="light", "dark", "neo" or "pixel" on <html>.

Accordion (exclusive)

Only one panel stays open

Opening another summary closes the previous one.

Second panel

Enabled by data-ar-exclusive on the container.

Third panel

Without the attribute, any number of panels can be open.