Wie füge ich ein Akkordeon in Markdown hinzu?

Pläne, die das Anpassen von Text im Markdown-Editor unterstützen

Wenn Sie möchten, dass Ihr Inhalt in Artikeln, die auf dem Markdown-Editor basieren, als Akkordeon angezeigt wird, gibt es keine Möglichkeit, ihn mit einem herkömmlichen Tool aus der Menüleiste oder einer einfachen Markdown-Syntax hinzuzufügen.

Verwenden Sie die folgende Problemumgehung, um mühelos ein Akkordeon im Markdown-Editor hinzuzufügen.

Lösung

1. Gehen Sie zum gewünschten Artikel und öffnen Sie ihn im Markdown-Editor.

2. Fügen Sie den folgenden Code an der gewünschten Stelle ein, an der das Akkordeon angezeigt werden soll

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

3. Ersetzen Sie den Accordion_name Text durch den gewünschten Akkordeon-Titel/-Namen

4. Ersetzen Sie den Accordion_content Text durch den gewünschten Inhalt

Wenn Sie Überschriften innerhalb des Akkordeons hinzufügen möchten, können Sie die Überschriften-HTML-Tags (<h2>..</h2>, <h3>..</h3>, <h4>..</h4>) in den Accordion_content Abschnitten verwenden

Beispiel

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>

Ergebnis

Erweiterte Anpassungen für Akkordeons

Sie können das Akkordeon verbessern, indem Sie Farben, gepunktete Rahmen und Symbole hinzufügen und es so einstellen, dass es immer geöffnet ist. So wenden Sie diese Anpassungen an:

Hinzufügen einer Kopffarbe zum Akkordeon

Um dem Akkordeon in den Artikeln eine Kopffarbe hinzuzufügen, führen Sie die folgenden Schritte aus:

1. Navigieren Sie im Wissensdatenbank-Portal zu Einstellungen () > Wissensdatenbank-Website > Website anpassen > benutzerdefiniertes CSS und JavaScript .

2. Klicken Sie im linken Navigationsbereich auf die Registerkarte CSS und fügen Sie das folgende CSS-Snippet ein:

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

3. Klicken Sie auf Speichern.

Anwenden einer Rahmenfarbe und gestrichelter Linien

So wenden Sie eine Rahmenfarbe und gepunktete Linien beim Bewegen des Mauszeigers an:

1. Navigieren Sie im Wissensdatenbank-Portal zu Einstellungen () > Wissensdatenbank-Website > Website anpassen > benutzerdefiniertes CSS und JavaScript .

2. Klicken Sie im linken Navigationsbereich auf die Registerkarte CSS und fügen Sie das folgende CSS-Snippet ein:

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

3. Passen Sie den obigen Code an Ihre Bedürfnisse an.

4. Wenn Sie fertig sind, klicken Sie auf Speichern.

Einstellen eines Akkordeons auf immer geöffnet

Um ein Akkordeon immer geöffnet zu halten, ändern Sie das open Attribut direkt im HTML-Code:

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

Dadurch wird sichergestellt, dass der Inhalt standardmäßig sichtbar ist.

Hinzufügen eines Plus-Symbols zur Kopfzeile des Akkordeons

So fügen Sie ein Pluszeichen hinzu, das sich beim Öffnen dreht:

1. Navigieren Sie im Wissensdatenbank-Portal zu Einstellungen () > Wissensdatenbank-Website > Website anpassen > benutzerdefiniertes CSS und JavaScript .

2. Klicken Sie im linken Navigationsbereich auf die Registerkarte CSS und fügen Sie das folgende CSS-Snippet ein:

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

3. Passen Sie Symbole oder Übergänge nach Belieben an.

4. Klicken Sie auf Speichern.

Häufig gestellte Fragen