¿Cómo agregar acordeón en Markdown?

Planes que admiten la personalización de texto en el editor de Markdown

Si desea que su contenido aparezca como un acordeón en los artículos basados en el editor de Markdown, no hay opción para agregarlo usando una herramienta convencional de la barra de menú o una sintaxis sencilla de Markdown.

Utilice la siguiente solución alternativa para agregar un acordeón sin esfuerzo en el editor de Markdown.

Solución

1. Ve al artículo deseado y ábrelo en el editor de Markdown.

2. Pegue el siguiente código en la ubicación deseada donde desea que aparezca el acordeón

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

3. Reemplace el Accordion_name texto con el título/nombre de acordeón deseado

4. Reemplace el Accordion_content texto con el contenido deseado

Si desea agregar encabezados dentro del acordeón, puede usar las etiquetas HTML de encabezado (<h2>..</h2>, <h3>..</h3>, <h4>..</h4>) en las Accordion_content secciones

Ejemplo

Código

<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 para acordeones

Puede mejorar el acordeón agregando colores, bordes punteados e íconos, y configurándolo para que siempre esté abierto. A continuación, se explica cómo aplicar estas personalizaciones:

Adición de color de encabezado al acordeón

Para agregar color de encabezado al acordeón en los artículos, siga los pasos a continuación:

1. Vaya a Configuración () > sitio de la base de conocimientos > Personalizar sitio > CSS y JavaScript personalizados en el portal de la base de conocimientos.

2. En el panel de navegación izquierdo, haga clic en la pestaña CSS y pegue el siguiente fragmento de CSS:

.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;
}

3. Haga clic en Guardar.

Aplicación de un color de borde y líneas punteadas

Para aplicar un color de borde y líneas punteadas al pasar el puntero:

1. Vaya a Configuración () > sitio de la base de conocimientos > Personalizar sitio > CSS y JavaScript personalizados en el portal de la base de conocimientos.

2. En el panel de navegación izquierdo, haga clic en la pestaña CSS y pegue el siguiente fragmento de CSS:

.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);
}

3. Personalice el código anterior en función de sus necesidades.

4. Una vez hecho esto, haga clic en Guardar.

Configurar un acordeón para que siempre esté abierto

Para mantener un acordeón siempre abierto, modifique el open atributo directamente en el HTML:

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

Esto garantiza que el contenido sea visible de forma predeterminada.

Adición de un icono más al encabezado del acordeón

Para agregar un icono más que gira al abrirlo:

1. Vaya a Configuración () > sitio de la base de conocimientos > Personalizar sitio > CSS y JavaScript personalizados en el portal de la base de conocimientos.

2. En el panel de navegación izquierdo, haga clic en la pestaña CSS y pegue el siguiente fragmento de CSS:

   .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);
   }

3. Ajusta los iconos o las transiciones como prefieras.

4. Haga clic en Guardar.

Preguntas frecuentes