Comment ajouter de l’accordéon dans Markdown ?

Plans prenant en charge la personnalisation du texte dans l’éditeur Markdown

Si vous souhaitez que votre contenu apparaisse en accordéon dans les articles basés sur l’éditeur Markdown, il n’est pas possible de l’ajouter à l’aide d’un outil conventionnel de la barre de menu ou d’une syntaxe Markdown simple.

Utilisez la solution de contournement ci-dessous pour ajouter un accordéon sans effort dans l’éditeur Markdown.

Solution

1. Accédez à l’article souhaité et ouvrez-le dans l’éditeur Markdown.

2. Collez le code ci-dessous à l’endroit souhaité où vous souhaitez que l’accordéon apparaisse

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

3. Remplacez le texte par le titre/le nom de l’accordéon Accordion_name souhaité

4. Remplacez le Accordion_content texte par le contenu souhaité

Si vous souhaitez ajouter des titres à l’intérieur de l’accordéon, vous pouvez utiliser les balises HTML de titre (<h2>..</h2>, <h3>..</h3>, <h4>..</h4>) dans les Accordion_content sections

Exemple

Code

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

Résultat

Personnalisations avancées pour les accordéons

Vous pouvez améliorer l’accordéon en ajoutant des couleurs, des bordures en pointillés et des icônes, et en le réglant pour qu’il s’ouvre toujours. Voici comment appliquer ces personnalisations :

Ajouter la couleur de l’en-tête à l’accordéon

Pour ajouter une couleur d’en-tête à l’accordéon dans les articles, suivez les étapes ci-dessous :

1. Accédez à Paramètres () > site de la base de connaissances > Personnaliser le site > CSS et JavaScript personnalisés dans le portail de la base de connaissances.

2. Dans le volet de navigation de gauche, cliquez sur l’onglet CSS et collez l’extrait de code CSS suivant :

.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. Cliquez sur Enregistrer.

Application d’une couleur de bordure et de lignes pointillées

Pour appliquer une couleur de bordure et des pointillés au survol :

1. Accédez à Paramètres () > site de la base de connaissances > Personnaliser le site > CSS et JavaScript personnalisés dans le portail de la base de connaissances.

2. Dans le volet de navigation de gauche, cliquez sur l’onglet CSS et collez l’extrait de code CSS suivant :

.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. Personnalisez le code ci-dessus en fonction de vos besoins.

4. Une fois cela fait, cliquez sur Enregistrer.

Régler un accordéon pour qu’il s’ouvre toujours

Pour garder un accordéon toujours ouvert, modifiez l’attribut open directement dans le code HTML :

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

Cela garantit que le contenu est visible par défaut.

Ajout d’une icône plus à l’en-tête de l’accordéon

Pour ajouter une icône plus qui pivote à l’ouverture :

1. Accédez à Paramètres () > site de la base de connaissances > Personnaliser le site > CSS et JavaScript personnalisés dans le portail de la base de connaissances.

2. Dans le volet de navigation de gauche, cliquez sur l’onglet CSS et collez l’extrait de code CSS suivant :

   .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. Ajustez les icônes ou les transitions selon vos préférences.

4. Cliquez sur Enregistrer.

Foire aux questions