---
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", "Customization", "Formatting tips", "Markdown Editor", "Translation"]
updated: 2026-06-20T09:11:17Z
published: 2026-06-20T09:11:17Z
canonical: "docs.document360.com/how-to-add-accordion-in-markdown"
---

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

The Markdown editor does not natively support accordions. The workaround is to use the HTML `<details>` and `<summary>` tags, which Document360's Markdown editor renders as a collapsible accordion. The `<details>` tag wraps the entire accordion, `<summary>` defines the clickable header, and any content inside renders as the expandable body.

---

## When to use accordions

- **Long articles with optional detail** - collapse supplementary information that only some readers need, keeping the article scannable without removing content.
- **FAQs or troubleshooting sections** - group related questions and answers so readers can jump to what is relevant to them.
- **Step-by-step guides with substeps** - nest additional detail inside a collapsible section to avoid overwhelming readers at first glance.

:::(Info) ( <span class="fa-regular fa-circle-exclamation" data-type="icon"></span> NOTE)
This technique only works in the **Markdown editor**. In the Advanced WYSIWYG editor, use the built-in accordion block from the Insert menu instead.
:::

---

## Quick reference

Replace `Accordion_name` with your accordion title and `Accordion_content` with your content.

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

To keep an accordion expanded by default, add the `open` attribute:

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

You can use heading tags (`<h2>`, `<h3>`, `<h4>`) inside the `Accordion_content` section to structure the body content.

:::(Warning) (<p class="fa-regular fa-circle-info"></p> WARNING)
Heading tags can be used inside the `<summary>` section, but this may affect text alignment in the accordion header.
:::

---

## How to add an accordion in Markdown

1. Open the desired article in the Markdown editor.
2. Paste the snippet below at the location where you want the accordion to appear.

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

3. Replace `Accordion_name` with your desired accordion title.
4. Replace `Accordion_content` with your desired content. You can use heading tags (`<h2>`, `<h3>`, `<h4>`), lists, and paragraphs inside this section.

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

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

---

## Advanced customisations

You can enhance the accordion's appearance using custom CSS applied through **Settings** > **Knowledge base site** > **Custom CSS & JavaScript** > **CSS** tab.

### Adding a header colour

Paste the following CSS to apply a background colour to the accordion header. Replace `yellow` with your desired colour.

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

Click **Save** when done.

### Applying a border colour and dotted lines on hover

Paste the following CSS to add a dotted border that becomes solid on hover. Adjust values as needed.

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

Click **Save** when done.

### Adding a plus/minus icon to the accordion header

Paste the following CSS to display a `+` icon that rotates to `-` when the accordion is open. Adjust icons or transitions as preferred.

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

Click **Save** when done.

---

## Scope and coverage

| Item | Detail |
|---|---|
| Supported content inside accordion body | Paragraphs, headings (H2–H4), lists, inline HTML |
| Heading tags in `<summary>` | Supported, but may affect text alignment |
| Default state | Collapsed — add `open` attribute to keep expanded by default |
| Styling support | Custom CSS required for colours, borders, and icons |
| Browser support | Works in all modern browsers; may not render in all Markdown environments |

---

## FAQ

<div class="faq-wrapper" data-type="details-wrapper">
  <details open>
    <summary>
      <p>Can I style an accordion using only Markdown?</p>
    </summary>
    <div data-type="details-content">
      <p>Markdown by itself does not support advanced styling or interactivity. You can create a basic collapsible accordion using the <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> HTML tags within Markdown, but colours, borders, and animations require custom CSS applied through the Knowledge Base site settings.</p>
    </div>
  </details>
  <button class="details-arrow" type="button"></button>
</div>

<div class="faq-wrapper" data-type="details-wrapper">
  <details>
    <summary>
      <p>What are the limitations of using Markdown for accordions?</p>
    </summary>
    <div data-type="details-content">
      <ul>
        <li><strong>Browser support</strong> — the <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> elements work in most modern browsers but may not render correctly in all Markdown environments.</li>
        <li><strong>Styling</strong> — you cannot style the accordion beyond the default browser styles without adding custom CSS.</li>
        <li><strong>Interactivity</strong> — accordion behaviour is limited to collapsing and expanding. Animations and advanced design options require CSS or JavaScript.</li>
      </ul>
    </div>
  </details>
  <button class="details-arrow" type="button"></button>
</div>

<div class="faq-wrapper" data-type="details-wrapper">
  <details>
    <summary>
      <p>How do I create a basic accordion in Markdown?</p>
    </summary>
    <div data-type="details-content">
      <p>Use the <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> tags directly in the Markdown editor. This creates a collapsible accordion without any CSS or JavaScript. For enhanced styling, add custom CSS through <strong>Settings</strong> > <strong>Knowledge base site</strong> > <strong>Custom CSS & JavaScript</strong>.</p>
    </div>
  </details>
  <button class="details-arrow" type="button"></button>
</div>

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