How to add accordion in Markdown?

Markdown does not natively support accordions in the editor. However, you can use the HTML tags provided in this article as a workaround to achieve this effect.

Solution

1. Go to the desired article and open it in the Markdown editor.

2. Paste the below code in the desired location where you want the accordion to appear

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

3. Replace the Accordion_name text with the desired accordion title/name

4. Replace the Accordion_content text with the desired content

If you want to add headings inside the accordian you can use the Heading HTML tags (<h2>..</h2>, <h3>..</h3>, <h4>..</h4>) in the Accordion_content sections

Example

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>

Outcome

Advanced customizations for accordions

You can enhance the accordion by adding colors, dotted borders, and icons, and setting it to always open. Here’s how to apply these customizations:

Adding header color to the accordion

To add header color to the accordion in the articles, follow the steps below:

1. Navigate to Settings () > Knowledge base site > Customize site > Custom CSS & JavaScript in the Knowledge base portal.

2. From the left navigation pane, click on the CSS tab and paste the following CSS snippet:

.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. Click Save.

Applying a border color and dotted lines

To apply a border color and dotted lines on hover:

1. Navigate to Settings () > Knowledge base site > Customize site > Custom CSS & JavaScript in the Knowledge base portal.

2. From the left navigation pane, click on the CSS tab and paste the following CSS snippet:

.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. Customize the code above based on your needs.

4. Once done, click Save.

Setting an accordion to always open

To keep an accordion always open, modify the open attribute directly in the HTML:

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

This ensures the content is visible by default.

Adding a plus icon to the accordion header

To add a plus icon that rotates upon opening:

1. Navigate to Settings () > Knowledge base site > Customize site > Custom CSS & JavaScript in the Knowledge base portal.

2. From the left navigation pane, click on the CSS tab and paste the following CSS snippet:

   .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. Adjust icons or transitions as preferred.

4. Click Save.