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.

Referencia rápida

Sustituye Accordion_name por el título de tu acordeón y Accordion_content por tu contenido.

<details>
    <summary>Accordion_name</summary>
    <p>Accordion_content</p>
</details>

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

<details open>
    <summary>Always open accordion</summary>
    <p>Content remains visible without user interaction.</p>
</details>

Puedes usar etiquetas de encabezado (<h2>, <h3>, <h4>) dentro de la Accordion_content sección para estructurar el contenido del cuerpo.

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.

<details>
    <summary>Accordion_name</summary>
    <p>Accordion_content</p>
</details>

3. Sustituye Accordion_name por el título de acordeón que quieras.
4. 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:

<details>
    <summary><strong>What is Document360?</strong></summary>
    <p>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.</p>
    <h4>Core parts</h4>
    <ul>
        <li>Knowledge base portal</li>
        <li>Knowledge base site</li>
        <li>Knowledge base widget</li>
        <li>API documentation</li>
    </ul>
</details>

Resultado:

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

Preguntas frecuentes