r-accordion · demo

default (una sola sección abierta a la vez)

<r-accordion><section data-label="Pregunta">Respuesta</section>...</r-accordion>

retals es una biblioteca de Web Components vanilla para hacer webs personales con la filosofía de Geocities, la ligereza del JAMstack, y el respeto por el código del visitante.

No. Puedes empezar arrastrando bloques en el editor. Si quieres meter mano al HTML, todo está ahí, legible, sin trucos.

Sí. Cada componente tiene un fallback legible sin JS. Progressive enhancement obligatorio.

A nada. El output es HTML + CSS + JS vanilla. Si retals desaparece mañana, tus webs siguen funcionando.

multiple — varias secciones abiertas a la vez

<r-accordion multiple>...</r-accordion>

Se puede abrir junto con otras.

Todas pueden estar abiertas a la vez.

Cada una se abre y cierra independientemente.

open="1" (sección pre-abierta)

<r-accordion open="1">...</r-accordion>

Esta empieza cerrada.

Esta empieza abierta (open="1").

Esta también empieza cerrada.

override de CSS vars

--r-accordion-border, --r-accordion-bg-open, --r-accordion-font-size

Contenido de la primera sección con estilo coral.

Contenido de la segunda sección.

Contenido de la tercera sección.

eventos r-accordion:open y r-accordion:close

Contenido alpha.

Contenido beta.

Contenido gamma.

esperando eventos…