--- title: "Cómo añadir acordeón en Markdown" slug: "how-to-add-accordion-in-markdown" description: "Use the simple workaround to add accordion in your Markdown editor. This workaround is brought to you by the Document360 Knowledge base platform for your documentation. " tags: ["Customization"] updated: 2026-06-22T08:48:10Z published: 2026-06-22T08:48:10Z canonical: "docs.document360.com/how-to-add-accordion-in-markdown" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Cómo añadir acordeón en Markdown El editor Markdown no soporta acordeones de forma nativa. La solución es usar el HTML `<details>` y `<summary>` las etiquetas, que el editor Markdown de Document360 renderiza como un acordeón plegable. La `<details>` etiqueta envuelve todo el acordeón, `<summary>` define el encabezado clicable y cualquier contenido dentro se representa como el cuerpo expandible. --- ## Cuándo usar acordeones - **Artículos largos con detalles opcionales** : colapsan información complementaria que solo algunos lectores necesitan, manteniendo el artículo escaneable sin eliminar contenido. - **Secciones de preguntas frecuentes o solución** de problemas: preguntas y respuestas en grupo para que los lectores puedan ir directamente a lo que les resulte relevante. - **Guías paso a paso con subpasos** : añade detalles adicionales dentro de una sección plegable para evitar abrumar a los lectores a primera vista. NOTA Esta técnica solo funciona en el **editor Markdown**. En el editor avanzado WYSIWYG, utiliza el bloque de acordeón integrado desde el menú Insertar. --- ## Referencia rápida Sustituye `Accordion_name` por el título de tu acordeón y `Accordion_content` por tu contenido. ```
   Accordion_name    

Accordion_content

``` Para mantener un acordeón expandido por defecto, añade el `open` atributo: ```
   Always open accordion    

Content remains visible without user interaction.

``` Puedes usar etiquetas de encabezado (`<h2>`, `<h3>`, `<h4>`) dentro de la `Accordion_content` sección para estructurar el contenido del cuerpo. ADVERTENCIA Las etiquetas de encabezado pueden usarse dentro de la `<summary>` sección, pero esto puede afectar la alineación del texto en la cabecera del acordeón. --- ## Cómo añadir un acordeón en Markdown 1. Abre el artículo deseado en el editor de Markdown. 2. Pega el fragmento de abajo en el lugar donde quieres que aparezca el acordeón. ```
   Accordion_name    

Accordion_content

``` 1. Sustituye `Accordion_name` por el título de acordeón que quieras. 2. Sustituye `Accordion_content` por el contenido que quieras. Puedes usar etiquetas de encabezado (`<h2>`, `<h3>`, `<h4>`), listas y párrafos dentro de esta sección. **Código de ejemplo:** ```
   What is Document360?    

A well-structured product to create a world-class knowledge base for your customers and employees. Content producers get the power, whereas content consumers get the simplicity.

   

Core parts

   
``` **Resultado:** ****¿Qué es Document360?****         Un producto bien estructurado para crear una base de conocimiento de primer nivel para tus clientes y empleados. Los productores de contenido tienen el poder, mientras que los consumidores de contenido reciben la simplicidad.     #### Partes principales     - Portal de la base de conocimiento - Sitio de la base de conocimiento - Widget de la base de conocimiento - Documentación de la API --- ## Personalizaciones avanzadas Puedes mejorar la apariencia del acordeón usando CSS personalizado aplicado a **través de Configuración** > **la base de conocimientos** > la pestaña **CSS personalizada >** **CSS** . ### Añadir un color de cabecera Pega el siguiente CSS para aplicar un color de fondo al encabezado del acordeón. Cámbiala `yellow` por el color que quieras. ``` .details-wrapper details[open] summary {    background-color: yellow !important;    border-radius: 0.75rem 0.75rem 0rem 0rem !important; } .details-wrapper summary {    background-color: yellow !important;    border-radius: 0.75rem 0.75rem 0.75rem 0.75rem !important; } .details-wrapper details:not([open]) summary {    background-color: yellow !important;    border-radius: 0.75rem 0.75rem 0.75rem 0.75rem !important; } ``` Haz **clic en Guardar** cuando termines. ### Aplicar un color de borde y líneas punteadas al flotar Pega el siguiente CSS para añadir un borde punteado que se vuelva sólido al pasar el cursor. Ajusta los valores según sea necesario. ``` .details-arrow {    left: 16px !important;    top: 42% !important;    transition: revert;    transform: rotate(317deg); } .details-wrapper details {    border: 1px dotted var(--e360-base-light-gray) !important;    transition: border 0.3s ease; } .details-wrapper details:hover {    border: 1px solid var(--e360-base-light-gray) !important; } .details-wrapper_rendered summary {    left: 19px;    position: relative; } .details-wrapper details[open]+.details-arrow {    transform: rotate(45deg); } ``` Haz **clic en Guardar** cuando termines. ### Añadir un icono de más/menos al encabezado del acordeón Pega el siguiente CSS para mostrar un `+` icono que gira hasta `-` cuando el acordeón está abierto. Ajusta iconos o transiciones según prefieras. ``` .details-wrapper details summary::before {    content: "+";    display: inline-block;    margin-right: 10px;    transition: transform 0.3s ease; } .details-wrapper details[open] summary::before {    content: "-";    transform: rotate(45deg); } ``` Haz **clic en Guardar** cuando termines. --- ## Alcance y cobertura | Punto | Detalle | | --- | --- | | Contenido soportado dentro del cuerpo del acordeón | Párrafos, encabezados (H2–H4), listas, HTML en línea | | Etiquetas de rumbo en `<summary>` | Está soportado, pero puede afectar a la alineación del texto | | Estado predeterminado | Colapsado — añadir `open` un atributo para mantener expandido por defecto | | Soporte de diseño | Se requiere CSS personalizado para colores, bordes e iconos | | Soporte para navegadores | Funciona en todos los navegadores modernos; puede que no se renderice en todos los entornos Markdown | --- ## Preguntas frecuentes   **¿Puedo estilizar un acordeón usando solo Markdown?**               Markdown por sí solo no soporta estilos avanzados ni interactividad. Puedes crear un acordeón plegable básico usando las `<details>` etiquetas HTML y `<summary>` y dentro de Markdown, pero los colores, bordes y animaciones requieren CSS personalizado aplicado a través de la configuración del sitio de la Base de Conocimientos.           **¿Cuáles son las limitaciones de usar Markdown para acordeones?**               - **Soporte para navegadores** — los `<details>` elementos y `<summary>` funcionan en la mayoría de los navegadores modernos, pero puede que no se rendericen correctamente en todos los entornos Markdown. - **Estilismo** — no puedes estilizar el acordeón más allá de los estilos predeterminados del navegador sin añadir CSS personalizado. - **Interactividad** — el comportamiento del acordeón se limita a colapsar y expandirse. Las animaciones y opciones avanzadas de diseño requieren CSS o JavaScript.           **¿Cómo creo un acordeón básico en Markdown?**               Usa las `<details>` etiquetas y `<summary>` directamente en el editor Markdown. Esto crea un acordeón plegable sin ningún CSS ni JavaScript. Para un estilo mejorado, añade CSS personalizado a través **de Configuración** > **Base de Conocimientos** > **CSS y JavaScript personalizados**. ## Related - [Cómo centrar el texto en Markdown](/how-to-center-align-the-text-in-markdown.md) - [Cómo añadir espacio extra en Markdown](/how-to-add-extra-space-in-markdown.md)