Comment ajouter un accordéon dans Markdown

L’éditeur Markdown ne prend pas en charge nativement les accordéons. La solution de contournement consiste à utiliser le HTML <details> et <summary> les balises, que l’éditeur Markdown de Document360 affiche comme un accordéon pliable. L’etiqueta <details> enveloppe l’intégralité de l’accordéon, <summary> définit l’en-tête cliquable, et tout contenu à l’intérieur est rendu sous forme de corps extensible.

Quand utiliser des accordéons

• Articles longs avec des détails optionnels - replier des informations complémentaires dont seuls certains lecteurs ont besoin, gardant l’article scannable sans supprimer du contenu.
• FAQ ou sections de dépannage - questions et réponses liées aux groupes pour que les lecteurs puissent passer directement à ce qui les concerne.
• Guides étape par étape avec sous-étapes – intégrez des détails supplémentaires dans une section pliable pour éviter d’accabler les lecteurs au premier abord.

Petite référence

Remplacez-le Accordion_name par le titre accordéon et Accordion_content par votre contenu.

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

Pour garder un accordéon développé par défaut, ajoutez l’attribut open :

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

Vous pouvez utiliser des balises d’en-tête (<h2>, <h3>, <h4>) à l’intérieur de la Accordion_content section pour structurer le contenu du corps.

Comment ajouter un accordéon dans Markdown

1. Ouvrez l’article souhaité dans l’éditeur Markdown.
2. Collez l’extrait ci-dessous à l’endroit où vous voulez que l’accordéon apparaisse.

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

3. Remplacez-le Accordion_name par le titre accordéon que vous souhaitez souhaiter.
4. Remplacez-le Accordion_content par le contenu que vous souhaitez obtenir. Vous pouvez utiliser des balises d’en-tête (<h2>, <h3>, <h4>), des listes et des paragraphes dans cette section.

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

Vous pouvez améliorer l’apparence de l’accordéon en utilisant du CSS personnalisé appliqué via les paramètres > le site de la base de connaissances > l’onglet CSS & JavaScript personnalisé > CSS .

Ajout d’une couleur d’en-tête

Collez le CSS suivant pour appliquer une couleur de fond à l’en-tête accordéon. Remplacez-la yellow par la couleur que vous souhaitez.

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

Cliquez sur Enregistrer quand c’est terminé.

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

Collez le CSS suivant pour ajouter une bordure pointillée qui devient solide en survolant. Ajustez les valeurs selon les besoins.

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

Cliquez sur Enregistrer quand c’est terminé.

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

Collez le CSS suivant pour afficher une + icône qui tourne vers - le moment où l’accordéon est ouvert. Ajustez les icônes ou les transitions selon vos préférences.

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

Cliquez sur Enregistrer quand c’est terminé.

Portée et couverture

FAQ