---
title: "Comment ajouter un accordéon dans 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:31:03Z
published: 2026-06-22T08:31:03Z
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.
# 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.
NOTE
Cette technique ne fonctionne que dans **l’éditeur Markdown**. Dans l’éditeur WYSIWYG avancé, utilisez plutôt le bloc accordéon intégré depuis le menu Insertion.
---
## Petite référence
Remplacez-le `Accordion_name` par le titre accordéon et `Accordion_content` par votre contenu.
```
Accordion_name
Accordion_content
```
Pour garder un accordéon développé par défaut, ajoutez l’attribut `open` :
```
Always open accordion
Content remains visible without user interaction.
```
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.
AVERTISSEMENT
Les balises d’en-tête peuvent être utilisées à l’intérieur de la `<summary>` section, mais cela peut affecter l’alignement du texte dans l’en-tête accordéon.
---
## 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.
```
Accordion_name
Accordion_content
```
1. Remplacez-le `Accordion_name` par le titre accordéon que vous souhaitez souhaiter.
2. 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 :**
```
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
- Knowledge base portal
- Knowledge base site
- Knowledge base widget
- API documentation
```
**Résultat :**
****Qu’est-ce que Document360 ?****
Un produit bien structuré pour créer une base de connaissances de classe mondiale pour vos clients et employés. Les producteurs de contenu ont le pouvoir, tandis que les consommateurs de contenu bénéficient de la simplicité.
#### Parties principales
- Portail de la base de connaissances
- Site de la base de connaissances
- Widget de base de connaissances
- Documentation API
---
## 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
| Objet | Détails |
| --- | --- |
| Contenu supporté à l’intérieur du corps de l’accordéon | Paragraphes, titres (H2–H4), listes, HTML en ligne |
| Tags de tête dans `<summary>` | Pris en charge, mais peut affecter l’alignement du texte |
| État par défaut | Collapsed — ajouter `open` un attribut pour garder l’extension par défaut |
| Support stylistique | CSS personnalisé requis pour les couleurs, bordures et icônes |
| Prise en charge du navigateur | Fonctionne dans tous les navigateurs modernes ; peut ne pas être affiché dans tous les environnements Markdown |
---
## FAQ
**Puis-je styliser un accordéon uniquement en utilisant Markdown ?**
Markdown à lui seul ne supporte pas un style ou une interactivité avancés. Vous pouvez créer un accordéon pliable basique en utilisant les `<details>` balises HTML et `<summary>` dans Markdown, mais les couleurs, bordures et animations nécessitent un CSS personnalisé appliqué via les paramètres du site de la Knowledge Base.
**Quelles sont les limites de l’utilisation de Markdown pour les accordéons ?**
- **Prise en charge du navigateur** — les `<details>` éléments et `<summary>` fonctionnent dans la plupart des navigateurs modernes mais peuvent ne pas s’afficher correctement dans tous les environnements Markdown.
- **Styling** — vous ne pouvez pas styliser l’accordéon au-delà des styles de navigateur par défaut sans ajouter un CSS personnalisé.
- **Interactivité** — le comportement de l’accordéon se limite à l’effondrement et à l’expansion. Les animations et les options de conception avancées nécessitent du CSS ou du JavaScript.
**Comment créer un accordéon basique dans Markdown ?**
Utilisez directement les `<details>` balises et `<summary>` dans l’éditeur Markdown. Cela crée un accordéon pliable sans aucun CSS ni JavaScript. Pour un style amélioré, ajoutez un CSS personnalisé via **les paramètres** > **le site de la base de connaissances** > **CSS personnalisé & JavaScript**.
## Related
- [Comment centrer l’alignement du texte dans Markdown](/how-to-center-align-the-text-in-markdown.md)
- [Comment ajouter de l’espace supplémentaire dans Markdown](/how-to-add-extra-space-in-markdown.md)