Contenedor con paneles expandibles. Compón los items con la macro accordion_item() (recomendada) o manualmente con .ok-accordion-item, .ok-accordion-trigger y .ok-accordion-panel. La interactividad se enchufa con Datastar (data-signals + data-on:click).
{% from "accordion.jinja" import accordion, accordion_item %}
{% call accordion(variant="ghost") %}
{% call accordion_item(title="¿Cómo se calcula el coste medio?", id="acc2-pmp", expanded=true, no_icon=true) %}
El coste medio (PMP) se recalcula al recibir cada compra: <code>(stock × coste actual + entrada × coste compra) / (stock + entrada)</code>.
{% endcall %}
{% call accordion_item(title="¿Puedo migrar desde otro ERP?", id="acc2-migrate", no_icon=true) %}
Soportamos importadores nativos para Holded, Sage 50, Contasol, A3 ERP y CSV plano.
{% endcall %}
{% endcall %}
<Accordion variant="ghost">
<AccordionItem title="¿Cómo se calcula el coste medio?" id="acc2-pmp" expanded no_icon>
El coste medio (PMP) se recalcula al recibir cada compra: <code>(stock × coste actual + entrada × coste compra) / (stock + entrada)</code>.
</AccordionItem>
<AccordionItem title="¿Puedo migrar desde otro ERP?" id="acc2-migrate" no_icon>
Soportamos importadores nativos para Holded, Sage 50, Contasol, A3 ERP y CSV plano.
</AccordionItem>
</Accordion>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
Variant cards — separados
Empresa configurada — ejercicio 2026, divisa EUR, plan PGC 2007.
Falta refrescar el token de Banco Sabadell (caducó hace 6 días).
{% from "accordion.jinja" import accordion, accordion_item %}
{% call accordion(variant="cards") %}
{% call accordion_item(title="Configuración inicial", id="acc3-init", sub="CIF, plan contable, ejercicio fiscal", meta="7/7 ✓", expanded=true) %}
Empresa configurada — ejercicio 2026, divisa EUR, plan PGC 2007.
{% endcall %}
{% call accordion_item(title="Conciliación bancaria", id="acc3-bank", sub="PSD2 con BBVA, La Caixa, Sabadell", meta="3/4 cuentas") %}
Falta refrescar el token de Banco Sabadell (caducó hace 6 días).
{% endcall %}
{% endcall %}
<Accordion variant="cards">
<AccordionItem title="Configuración inicial" id="acc3-init" sub="CIF, plan contable, ejercicio fiscal" meta="7/7 ✓" expanded>
Empresa configurada — ejercicio 2026, divisa EUR, plan PGC 2007.
</AccordionItem>
<AccordionItem title="Conciliación bancaria" id="acc3-bank" sub="PSD2 con BBVA, La Caixa, Sabadell" meta="3/4 cuentas">
Falta refrescar el token de Banco Sabadell (caducó hace 6 días).
</AccordionItem>
</Accordion>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
Datastar · expand/collapse reactivo
El estado $open se sincroniza con data-state y aria-expanded a través de Datastar.
Cada item tiene su propio signal local.
<div class="accordion">
<div class="accordion-item"
data-signals="{ open: true }"
data-attr:data-state="$open ? 'open' : 'closed'">
<button type="button"
id="acc4-toggle-trigger"
class="accordion-trigger"
aria-controls="acc4-toggle-panel"
aria-expanded="true"
data-attr:aria-expanded="$open"
data-on:click="$open = !$open">
<span class="accordion-title">Click aquí para expandir/colapsar
</span>
<span class="accordion-caret" aria-hidden="true">▾</span>
</button>
<div id="acc4-toggle-panel"
role="region"
aria-labelledby="acc4-toggle-trigger"
class="accordion-panel">
El estado <code>$open</code> se sincroniza con <code>data-state</code> y <code>aria-expanded</code> a través de Datastar.
</div>
</div>
<div class="accordion-item"
data-signals="{ open: false }"
data-attr:data-state="$open ? 'open' : 'closed'">
<button type="button"
id="acc4-other-trigger"
class="accordion-trigger"
aria-controls="acc4-other-panel"
aria-expanded="false"
data-attr:aria-expanded="$open"
data-on:click="$open = !$open">
<span class="accordion-title">Otro item independiente
</span>
<span class="accordion-caret" aria-hidden="true">▾</span>
</button>
<div id="acc4-other-panel"
role="region"
aria-labelledby="acc4-other-trigger"
class="accordion-panel">
Cada item tiene su propio signal local.
</div>
</div>
</div>
{% from "accordion.jinja" import accordion, accordion_item %}
{% call accordion() %}
{% call accordion_item(title="Click aquí para expandir/colapsar", id="acc4-toggle", expanded=true) %}
El estado <code>$open</code> se sincroniza con <code>data-state</code> y <code>aria-expanded</code> a través de Datastar.
{% endcall %}
{% call accordion_item(title="Otro item independiente", id="acc4-other") %}
Cada item tiene su propio signal local.
{% endcall %}
{% endcall %}
<Accordion>
<AccordionItem title="Click aquí para expandir/colapsar" id="acc4-toggle" expanded>
El estado <code>$open</code> se sincroniza con <code>data-state</code> y <code>aria-expanded</code> a través de Datastar.
</AccordionItem>
<AccordionItem title="Otro item independiente" id="acc4-other">
Cada item tiene su propio signal local.
</AccordionItem>
</Accordion>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
API · accordion
Prop
Tipo
Default
Descripción
variant
"default"|"ghost"|"cards"
"default"
Estilo del contenedor.
attrs
dict
{}
Atributos HTML extra.
(slot)
—
—
Items .ok-accordion-item compuestos por el consumidor (o, preferentemente, accordion_item()).
API · accordion_item
Macro auxiliar que emite item + trigger + panel con todos los atributos ARIA correctos (aria-expanded, aria-controls, aria-labelledby, role="region") y el toggle Datastar ya cableado. Importar con {% from "accordion.jinja" import accordion_item %}.
Prop
Tipo
Default
Descripción
title
str
""
Texto del trigger.
id
str|None
None
Base estable para los IDs (<id>-trigger / <id>-panel). Si se omite, se deriva del título.