--- title: "Wie man Akkordeon in Markdown hinzufügt" 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:43:25Z published: 2026-06-22T08:43:25Z 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. # Wie man Akkordeon in Markdown hinzufügt Der Markdown-Editor unterstützt keine Akkordeons nativ. Der Workaround besteht darin, HTML und `<summary>` Tags `<details>` zu verwenden, die der Markdown-Editor von Document360 als zusammenklappbares Akkordeon rendert. Das `<details>` Tag umhüllt das gesamte Akkordeon, `<summary>` definiert den klickbaren Header, und alle darin enthaltenen Inhalte werden als expandierbarer Körper gerendert. --- ## Wann man Akkordeons benutzt - **Lange Artikel mit optionalen Details** – fügen Sie ergänzende Informationen zusammen, die nur einige Leser benötigen, und halten Sie den Artikel überlesbar, ohne den Inhalt zu entfernen. - **FAQs oder Fehlerbehebungsabschnitte** – gruppieren Sie Fragen und Antworten, damit die Leser zu dem springen können, was für sie relevant ist. - **Schritt-für-Schritt-Anleitungen mit Unterschritten** – verschachteln Sie zusätzliche Details in einem zusammenklappbaren Abschnitt, um die Leser nicht auf den ersten Blick zu überfordern. HINWEIS Diese Technik funktioniert nur im **Markdown-Editor**. Im erweiterten WYSIWYG-Editor verwenden Sie stattdessen den eingebauten Akkordeonblock aus dem Einfügen-Menü. --- ## Kurze Referenz Ersetzen Sie `Accordion_name` es durch Ihren Akkordeontitel und `Accordion_content` durch Ihren Inhalt. ```
   Accordion_name    

Accordion_content

``` Um ein Akkordeon standardmäßig erweitert zu halten, fügen Sie das Attribut `open` hinzu: ```
   Always open accordion    

Content remains visible without user interaction.

``` Du kannst Überschriftstags (`<h2>`, `<h3>`, `<h4>`) innerhalb des `Accordion_content` Abschnitts verwenden, um den Hauptteil zu strukturieren. WARNUNG Überschriftstags können innerhalb des `<summary>` Abschnitts verwendet werden, dies kann jedoch die Textausrichtung im Akkordeon-Header beeinflussen. --- ## Wie man ein Akkordeon in Markdown einfügt 1. Öffnen Sie den gewünschten Artikel im Markdown-Editor. 2. Fügen Sie den Ausschnitt unten an die Stelle ein, an der das Akkordeon erscheinen soll. ```
   Accordion_name    

Accordion_content

``` 1. Ersetzen Sie `Accordion_name` sie durch Ihren gewünschten Akkordeon-Titel. 2. Ersetzen Sie `Accordion_content` sie durch Ihren gewünschten Inhalt. Sie können Überschriftstags (`<h2>`, `<h3>`, ), `<h4>`Listen und Absätze in diesem Abschnitt verwenden. **Beispielcode:** ```
   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

   
``` **Ergebnis:** ****Was ist Document360?****         Ein gut strukturiertes Produkt, um eine erstklassige Wissensdatenbank für Ihre Kunden und Mitarbeiter zu schaffen. Inhaltsproduzenten bekommen die Macht, während Inhaltskonsumenten die Einfachheit bekommen.     #### Kernteile     - Knowledge Base Portal - Wissensdatenbank - Wissensdatenbank-Widget - API-Dokumentation --- ## Erweiterte Anpassungen Sie können das Aussehen des Akkordeons mit benutzerdefiniertem CSS verbessern, das über die **Einstellungen** > **Knowledge Base-Seite** > **benutzerdefiniertes CSS & JavaScript** > **CSS-Tab** angewendet wird. ### Hinzufügen einer Kopfzeilenfarbe Füge das folgende CSS ein, um eine Hintergrundfarbe auf den Akkordeon-Header anzuwenden. Ersetze `yellow` sie durch die gewünschte Farbe. ``` .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; } ``` Klicke auf Speichern, wenn du fertig **bist** . ### Anbringen einer Randfarbe und gestrichelter Linien beim Schwebekreuzen Füge das folgende CSS ein, um einen gepunkteten Rand hinzuzufügen, der beim Überschweben durchwachsen wird. Passen Sie die Werte nach Bedarf an. ``` .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); } ``` Klicke auf Speichern, wenn du fertig **bist** . ### Hinzufügen eines Plus/Minus-Symbols zum Akkordeon-Header Füge das folgende CSS ein, um ein `+` Symbol anzuzeigen, das sich dreht, bis `-` das Akkordeon geöffnet ist. Passe Symbole oder Übergänge nach Belieben an. ``` .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); } ``` Klicke auf Speichern, wenn du fertig **bist** . --- ## Umfang und Reichweite | Gegenstand | Detail | | --- | --- | | Unterstützter Inhalt im Akkordeonkörper | Absätze, Überschriften (H2–H4), Listen, Inline-HTML | | Überschrift Tags in `<summary>` | Unterstützt, kann aber die Textausrichtung beeinflussen | | Standardzustand | Zusammengeklappt — Attribut hinzufügen `open` , um standardmäßig erweitert zu bleiben | | Stylingunterstützung | Benutzerdefiniertes CSS ist für Farben, Ränder und Symbole erforderlich. | | Browser-Unterstützung | Funktioniert in allen modernen Browsern; kann in allen Markdown-Umgebungen nicht gerendert werden | --- ## FAQ   **Kann ich ein Akkordeon nur mit Markdown stylen?**               Markdown allein unterstützt kein fortgeschrittenes Styling oder Interaktivität. Man kann ein einfaches zusammenklappbares Akkordeon mit den `<details>` `<summary>` HTML-Tags in Markdown erstellen, aber Farben, Ränder und Animationen erfordern benutzerdefiniertes CSS, das über die Einstellungen der Knowledge Base angewendet wird.           **Was sind die Einschränkungen bei der Verwendung von Markdown für Akkordeons?**               - **Browser-Unterstützung** – die und `<summary>` Elemente `<details>` funktionieren in den meisten modernen Browsern, werden aber möglicherweise nicht in allen Markdown-Umgebungen korrekt wiedergegeben. - **Styling** – Sie können das Akkordeon nicht über die Standard-Browserstile hinaus stylen, ohne benutzerdefiniertes CSS hinzuzufügen. - **Interaktivität** – das Akkordeonverhalten beschränkt sich auf das Kollabieren und Ausdehnen. Animationen und fortgeschrittene Designoptionen erfordern CSS oder JavaScript.           **Wie erstelle ich in Markdown ein einfaches Akkordeon?**               Verwende die und-Tags `<details>` `<summary>` direkt im Markdown-Editor. Dadurch entsteht ein zusammenklappbares Akkordeon ohne CSS oder JavaScript. Für ein verbessertes Styling fügen Sie benutzerdefiniertes CSS über **Settings** > **Knowledge Base-Website** > **benutzerdefiniertes CSS & JavaScript** hinzu. ## Related - [Wie man den Text in Markdown zentriert](/how-to-center-align-the-text-in-markdown.md) - [Wie man zusätzlichen Platz in Markdown hinzufügt](/how-to-add-extra-space-in-markdown.md)