Softonic

Generador de acordeones CSS

Paso 1 / 4 Contenido

Contenido del acordeón

Introduce encabezados y contenido de panel en texto sin formato. El texto similar a HTML se escapa en el código generado.

El texto y los ajustes del acordeón permanecen en esta pestaña del navegador. No se envían por Livewire, no se incluyen en la URL ni se suben. Al cerrar la pestaña se borra el estado temporal del embudo.

Crea un acordeón de tres secciones con los elementos semánticos <details> y <summary>. Edita los encabezados y paneles como texto sin formato, elige los colores y el espaciado, comprueba el uso con teclado en la vista previa y copia el HTML y CSS escapados o descarga un archivo independiente. El editor funciona por completo en la pestaña del navegador.

Cómo crear un acordeón CSS

  1. 1

    Escribe tres secciones

    Añade un encabezado breve y texto de panel a cada elemento. Las entradas similares a HTML se escapan en lugar de ejecutarse.

  2. 2

    Elige el diseño

    Configura cuatro colores de seis dígitos, un radio de 0 a 24 px y un espaciado interior de 8 a 32 px.

  3. 3

    Define el comportamiento

    Permite que sigan abiertos varios paneles o usa el atributo `name` nativo para formar un grupo de apertura exclusiva. Elige un chevron o más/menos.

  4. 4

    Prueba y exporta

    Prueba la vista previa con puntero y teclado y copia el fragmento o descarga un archivo HTML en UTF-8.

Qué genera la herramienta

Cada elemento utiliza los controles desplegables nativos del navegador:

<details class="generated-accordion" open>
  <summary>¿Qué incluye?</summary>
  <div class="generated-accordion__panel">Añade aquí la información.</div>
</details>

El CSS generado aplica estilo al borde, el fondo del encabezado, el texto, el anillo de foco, el espaciado, las esquinas y el indicador. Usa propiedades lógicas como margin-inline-start e incluye reglas para el indicador en diseños de derecha a izquierda. Una consulta de movimiento reducido elimina la transición del icono cuando el visitante solicita menos movimiento.

Varios paneles o uno solo

Ajuste Marcado generado Resultado
Varios paneles Sin name compartido Cada elemento se abre y cierra de forma independiente
Un panel El mismo name="generated-accordion" en todos los elementos Al abrir un elemento se cierra otro en los navegadores compatibles

La opción de un solo panel usa el atributo name nativo de details. Los navegadores antiguos que no admiten grupos exclusivos siguen mostrando un acordeón utilizable, aunque pueden dejar abiertos varios elementos.

Contenido seguro en texto sin formato

Los encabezados y paneles se tratan como texto. Los caracteres <, >, &, las comillas y los apóstrofos se escapan como HTML en el fragmento exportado. De este modo, una etiqueta pegada se muestra como texto y no se convierte en marcado ejecutable. Si un panel necesita enlaces, listas o formato enriquecido, añade tú mismo ese marcado revisado después de exportar.

Comprobaciones de accesibilidad antes de publicar

  • Usa Tab para llegar a cada summary y ábrelo o ciérralo con Intro o Espacio.
  • Comprueba el color de foco sobre el fondo del encabezado y sobre el fondo de la página.
  • Escribe encabezados breves y responde a cada uno con claridad en su panel.
  • Prueba el zoom, las pantallas estrechas y las páginas de derecha a izquierda en el diseño de destino.
  • No escondas la instrucción principal de la página dentro de un acordeón cerrado.

Preguntas frecuentes

No. La apertura y el cierre usan el comportamiento nativo de <details> y <summary>. El componente descargado solo contiene HTML y CSS.

Sí. Elige el ajuste de un solo panel. El generador asigna el mismo atributo name a los tres elementos <details>. Los navegadores sin grupos details exclusivos vuelven a los paneles independientes.

El editor trata la entrada como texto sin formato y escapa los caracteres HTML. Así, el marcado pegado no se ejecuta en la vista previa ni en el fragmento generado. Añade marcado enriquecido revisado después de exportar si lo necesitas.

No. El texto, los ajustes, la vista previa, la copia y la descarga permanecen en el navegador. Durante el embudo de varias páginas, el estado temporal se guarda en el sessionStorage de la pestaña actual y no se incluye en la URL.

Herramientas relacionadas

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Simplificador de Álgebra Booleana

Simplifica expresiones booleanas usando mapas de Karnaugh y el algoritmo de Quine-McCluskey. Muestra cada paso de minimización y una forma final SOP/POS.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Generador de colores aleatorios

Genera de 1 a 50 colores HEX aleatorios con muestras para previsualizar, copiar y usar en CSS, pruebas o exploración de paletas.

Convertidor de BBCode a HTML

Convierte BBCode (marcado de tablones de anuncios) a HTML limpio. Maneja etiquetas de formato, listas, citas, código, imágenes, enlaces y tablas.