---
title: "Hoe voeg je accordeon toe in 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", "Accordion", "Formatting tips", "Markdown Editor", "Translation"]
updated: 2026-06-22T09:03:37Z
published: 2026-06-22T09:03:37Z
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.
# Hoe voeg je accordeon toe in Markdown
De Markdown-editor ondersteunt geen accordeons van nature. De oplossing is om de HTML `<details>` en `<summary>` tags te gebruiken, die door de Markdown-editor van Document360 als een inklapbare accordeon worden weergegeven. De `<details>` tag omsluit de hele accordeon, `<summary>` definieert de klikbare header, en alle inhoud erin wordt weergegeven als het uitbreidbare lichaam.
---
## Wanneer accordeons te gebruiken
- **Lange artikelen met optionele details** - voeg aanvullende informatie in die alleen sommige lezers nodig hebben, zodat het artikel scanbaar blijft zonder inhoud te verwijderen.
- **Veelgestelde vragen of probleemoplossingssecties** - groeperen gerelateerde vragen en antwoorden zodat lezers kunnen overstappen naar wat voor hen relevant is.
- **Stapsgewijze handleidingen met substappen** - stop extra details in een inklapbaar gedeelte om te voorkomen dat lezers meteen overweldigd worden.
OPMERKING
Deze techniek werkt alleen in de **Markdown-editor**. Gebruik in de Advanced WYSIWYG-editor in plaats daarvan het ingebouwde accordeonblok uit het Insert-menu.
---
## Snelle referentie
Vervang `Accordion_name` het met je accordeontitel en `Accordion_content` met je eigen inhoud.
```
Accordion_name
Accordion_content
```
Om een accordeon standaard vergroot te houden, voeg je het `open` attribuut toe:
```
Always open accordion
Content remains visible without user interaction.
```
Je kunt koptags (`<h2>`, `<h3>`, `<h4>`) binnen de `Accordion_content` sectie gebruiken om de inhoud van de inhoud te structureren.
WAARSCHUWING
Koptags kunnen binnen de `<summary>` sectie worden gebruikt, maar dit kan de tekstuitlijning in de accordeonheader beïnvloeden.
---
## Hoe voeg je een accordeon toe in Markdown
1. Open het gewenste artikel in de Markdown-editor.
2. Plak het fragment hieronder op de plek waar je wilt dat de accordeon verschijnt.
```
Accordion_name
Accordion_content
```
1. Vervang `Accordion_name` het door de gewenste accordeontitel.
2. Vervang `Accordion_content` door de gewenste inhoud. Je kunt koptags (`<h2>`, `<h3>`, ), `<h4>`lijsten en alinea's in deze sectie gebruiken.
**Voorbeeldcode:**
```
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
```
**Resultaat:**
****Wat is Document360?****
Een goed gestructureerd product om een kennisbasis van wereldklasse te creëren voor je klanten en medewerkers. Contentmakers krijgen de macht, terwijl contentconsumenten de eenvoud krijgen.
#### Kernonderdelen
- Kennisbankportaal
- Kennisbanksite
- Kennisbankwidget
- API-documentatie
---
## Geavanceerde aanpassingen
Je kunt het uiterlijk van de accordeon verbeteren met aangepaste CSS die wordt toegepast via **Settings** > **Knowledge Base-site** > **Custom CSS & JavaScript** > **CSS-tabblad** .
### Een kopkleur toevoegen
Plak de volgende CSS om een achtergrondkleur toe te passen op de accordeonheader. Vervang `yellow` door de gewenste kleur.
```
.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;
}
```
Klik op **Opslaan** als je klaar bent.
### Een randkleur en stippellijnen aanbrengen tijdens het hoveren
Plak de volgende CSS om een gestippelde rand toe te voegen die bij het hoveren solide wordt. Pas de waarden aan indien nodig.
```
.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);
}
```
Klik op **Opslaan** als je klaar bent.
### Een plus/min-icoon toevoegen aan de accordeonheader
Plak de volgende CSS om een `+` pictogram te tonen dat draait naar het moment waarop `-` de accordeon open is. Pas pictogrammen of overgangen aan naar wens.
```
.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);
}
```
Klik op **Opslaan** als je klaar bent.
---
## Reikwijdte en dekking
| Item | Detail |
| --- | --- |
| Ondersteunde inhoud binnen accordeonlichaam | Paragrafen, koppen (H2–H4), lijsten, inline HTML |
| Koptags in `<summary>` | Ondersteund, maar kan de tekstuitlijning beïnvloeden |
| Standaardtoestand | Ingeklapt — voeg attributen toe `open` om standaard uitgebreid te houden |
| Stylingondersteuning | Aangepaste CSS vereist voor kleuren, randen en iconen |
| Browserondersteuning | Werkt in alle moderne browsers; kan niet in alle Markdown-omgevingen worden weergegeven |
---
## FAQ
**Kan ik een accordeon stylen met alleen Markdown?**
Markdown op zichzelf ondersteunt geen geavanceerde styling of interactiviteit. Je kunt een eenvoudige inklapbare accordeon maken met de `<details>` `<summary>` en HTML-tags binnen Markdown, maar kleuren, randen en animaties vereisen aangepaste CSS die via de instellingen van de Knowledge Base wordt toegepast.
**Wat zijn de beperkingen van het gebruik van Markdown voor accordeons?**
- **Browserondersteuning** — de `<details>` en `<summary>` elementen werken in de meeste moderne browsers, maar worden mogelijk niet correct weergegeven in alle Markdown-omgevingen.
- **Styling** — je kunt de accordeon niet stylen buiten de standaard browserstijlen zonder aangepaste CSS toe te voegen.
- **Interactiviteit** — accordeongedrag beperkt zich tot instorten en uitbreiden. Animaties en geavanceerde ontwerpopties vereisen CSS of JavaScript.
**Hoe maak ik een eenvoudige accordeon in Markdown?**
Gebruik de `<details>` tags en `<summary>` direct in de Markdown-editor. Dit creëert een inklapbare accordeon zonder CSS of JavaScript. Voor verbeterde styling voeg je aangepaste CSS toe via **Settings** > **Knowledge Base-site** > **Custom CSS & JavaScript**.
## Related
- [Hoe je de tekst in Markdown centraal uitlijnt](/how-to-center-align-the-text-in-markdown.md)
- [Hoe voeg je extra ruimte toe in Markdown](/how-to-add-extra-space-in-markdown.md)