Cards & Layout

Accordion

Native details/summary stack — exclusive or multi-open.

Element: <details>
Module: @basenative/components
Function: renderAccordion

Quick start

Import the render function and call it from your server template.

import { renderAccordion } from '@basenative/components';

renderAccordion({ items: [{ title: '...', content: '...' }] });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Native disclosure

Built on native <details>/<summary>.

Live render

What is BaseNative?

A signal-based runtime over native HTML — ~120 lines for the core primitives.

How does SSR work?

The server renderer evaluates @if, @for, @switch directives at request time and emits clean HTML with hydration markers.

What about hydration?

hydrate() walks the DOM, binds reactive expressions, and attaches event handlers without reconstructing the tree.

Source

renderAccordion({
  items: [
    { title: 'What is BaseNative?', content: 'A signal-based runtime over native HTML.' },
    { title: 'How does SSR work?', content: 'Directives are evaluated at request time.' },
  ],
})

Expand / collapse all

A button toggles the open attribute on every <details>.

Live render

Section one

Body for section one.

Section two

Body for section two.

Section three

Body for section three.

Source

// multiple: true — without it the group is exclusive (shared name=), so
// opening each <details> in turn closes the one before it.
renderAccordion({
  multiple: true,
  items: [
    { title: 'Section one', content: 'Body for section one.' },
    { title: 'Section two', content: 'Body for section two.' },
  ],
});

const open = signal(false);

effect(() => {
  for (const d of slot.querySelectorAll('details')) d.open = open();
});

expandBtn.onclick   = () => open.set(true);
collapseBtn.onclick = () => open.set(false);

Options

Arguments accepted by renderAccordion().

renderAccordion option reference
Option	Type	Default	Description
`items`	`{ title, content }[]`	`—`	Accordion sections.