Hoe accordeon toevoegen in Markdown?

Plannen die het aanpassen van tekst in de markdown-editor ondersteunen

Als u wilt dat uw inhoud wordt weergegeven als een accordeon in op Markdown-editor gebaseerde artikelen, is er geen optie om deze toe te voegen met behulp van een conventionele tool uit de menubalk of een eenvoudige Markdown-syntaxis.

Gebruik de onderstaande tijdelijke oplossing om moeiteloos een accordeon toe te voegen in de Markdown-editor.

Oplossing

1. Ga naar het gewenste artikel en open het in de Markdown-editor.

2. Plak de onderstaande code op de gewenste locatie waar u de accordeon wilt laten verschijnen

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

3. Vervang de Accordion_name tekst door de gewenste accordeontitel/naam

4. Vervang de Accordion_content tekst door de gewenste inhoud

Als u koppen in de accordeon wilt toevoegen, kunt u de HTML-tags voor koppen (<h2>..</h2>, <h3>..</h3>, <h4>..</h4>) in de Accordion_content secties gebruiken

Voorbeeld

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>

Resultaat

Geavanceerde aanpassingen voor accordeons

U kunt de accordeon verbeteren door kleuren, gestippelde randen en pictogrammen toe te voegen en deze in te stellen op altijd open. Ga als volgt te werk om deze aanpassingen toe te passen:

Koptekstkleur toevoegen aan de accordeon

Volg de onderstaande stappen om koptekstkleur toe te voegen aan de accordeon in de artikelen:

1. Navigeer naar Instellingen () > Kennisbanksite > Site aanpassen > Aangepaste CSS en JavaScript in de Kennisbankportal.

2. Klik in het linkernavigatievenster op het tabblad CSS en plak het volgende CSS-fragment:

.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. Klik op Opslaan.

Een randkleur en stippellijnen toepassen

Een randkleur en stippellijnen toepassen bij de muisaanwijzer:

1. Navigeer naar Instellingen () > Kennisbanksite > Site aanpassen > Aangepaste CSS en JavaScript in de Kennisbankportal.

2. Klik in het linkernavigatievenster op het tabblad CSS en plak het volgende CSS-fragment:

.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. Pas de bovenstaande code aan op basis van uw behoeften.

4. Als u klaar bent, klikt u op Opslaan.

Een accordeon instellen om altijd open te staan

Om een accordeon altijd open te houden, wijzigt u het open attribuut rechtstreeks in de HTML:

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

Dit zorgt ervoor dat de inhoud standaard zichtbaar is.

Een pluspictogram toevoegen aan de accordeonkop

Een pluspictogram toevoegen dat draait bij het openen:

1. Navigeer naar Instellingen () > Kennisbanksite > Site aanpassen > Aangepaste CSS en JavaScript in de Kennisbankportal.

2. Klik in het linkernavigatievenster op het tabblad CSS en plak het volgende CSS-fragment:

   .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. Pas pictogrammen of overgangen naar wens aan.

4. Klik op Opslaan.

VEELGESTELDE VRAGEN