---
title: "How to add accordion in Markdown"
slug: "how-to-add-accordion-in-markdown"
description: "Use the simple workaround to add accordion in your Markdown editor. This workaround is brought to you by the Document360 Knowledge base platform for your documentation. "
tags: ["Accordion", "Markdown", "Customization", "Formatting tips"]
updated: 2025-05-13T08:33:03Z
published: 2025-05-13T08:33:03Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

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

1. Replace the `Accordion_name` text with the desired accordion title/name
2. 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 (`&lt;h2&gt;..&lt;/h2&gt;, &lt;h3&gt;..&lt;/h3&gt;, &lt;h4&gt;..&lt;/h4&gt;`) in the `Accordion_content` sections

** CAUTION

Heading tags can be used in the summary section of the accordian "`Accordion_name`", but the text alignment might be affected.

### Example

#### Code

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

****What is Document360****

A well-structured product to create a world class knowledge base for your customers and employees. Content producers get the power whereas the Content consumers get the simplicity.

#### Core parts

- Knowledge base portal
- Knowledge base site
- Knowledge base widget
- API documentation

---

## 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** (<nor class="fa-solid fa-gear" data-tomark-pass=""></nor>) > **Knowledge base site** > **Site customization** > **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:

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

1. Click **Save**.

---

### Applying a border color and dotted lines

To apply a border color and dotted lines on hover:

1. Navigate to **Settings** (<nor class="fa-solid fa-gear" data-tomark-pass=""></nor>) > **Knowledge base site** > **Site customization** > **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:

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

1. Customize the code above based on your needs.
2. Once done, click **Save**.

---

### Setting an accordion to always open

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

```xml
<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** (<nor class="fa-solid fa-gear" data-tomark-pass=""></nor>) > **Knowledge base site** > **Site customization** > **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:

```css
.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**.

---

### FAQs

#### **Can I style an accordion using only Markdown?**

Markdown by itself does not support advanced styling or interactivity like you would find with HTML and CSS. However, you can achieve a simple accordion effect using Markdown’s built-in features, particularly with platforms that support it, such as Document360.

#### **What are the limitations of using Markdown for accordions?**

- **Browser Support:** The `&lt;details&gt;` and `&lt;summary&gt;` elements work in most modern browsers but may not render correctly in all Markdown environments.
- **Styling:** You won’t be able to style the accordion (e.g., colors, borders) beyond the default browser styles.
- **Interactivity:** The interactivity is limited to collapsing and expanding the text without additional animations or design options.

#### **How can I create an accordion using Markdown?**

Using the `&lt;details&gt;` and `&lt;summary&gt;` tags within Markdown is the best way to create a basic accordion without additional CSS or JavaScript. For enhanced styling or features, you would need to resort to HTML and CSS or use a Markdown processor that allows for custom styles.

## Related

- [How to center align the text in Markdown](/how-to-center-align-the-text-in-markdown.md)
- [How to add extra space in Markdown](/how-to-add-extra-space-in-markdown.md)