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.

Kurze Referenz

Ersetzen Sie Accordion_name es durch Ihren Akkordeontitel und Accordion_content durch Ihren Inhalt.

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

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

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

Du kannst Überschriftstags (<h2>, <h3>, <h4>) innerhalb des Accordion_content Abschnitts verwenden, um den Hauptteil zu strukturieren.

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.

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

3. Ersetzen Sie Accordion_name sie durch Ihren gewünschten Akkordeon-Titel.
4. 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:

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

Ergebnis:

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

FAQ