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.

Snelle referentie

Vervang Accordion_name het met je accordeontitel en Accordion_content met je eigen inhoud.

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

Om een accordeon standaard vergroot te houden, voeg je het open attribuut toe:

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

Je kunt koptags (<h2>, <h3>, <h4>) binnen de Accordion_content sectie gebruiken om de inhoud van de inhoud te structureren.

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.

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

3. Vervang Accordion_name het door de gewenste accordeontitel.
4. Vervang Accordion_content door de gewenste inhoud. Je kunt koptags (<h2>, <h3>, ), <h4>lijsten en alinea's in deze sectie gebruiken.

Voorbeeldcode:

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

Resultaat:

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

FAQ