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.
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.
<details>
<summary>Accordion_name</summary>
<p>Accordion_content</p>
</details>
To keep an accordion expanded by default, add the open attribute:
<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.
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
- Open the desired article in the Markdown editor.
- Paste the snippet below at the location where you want the accordion to appear.
<details>
<summary>Accordion_name</summary>
<p>Accordion_content</p>
</details>
- Replace
Accordion_namewith your desired accordion title. - Replace
Accordion_contentwith your desired content. You can use heading tags (<h2>,<h3>,<h4>), lists, and paragraphs inside this section.
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:
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 content consumers get the simplicity.
Core parts
- Knowledge base portal
- Knowledge base site
- Knowledge base widget
- API documentation
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.
.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.
.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.
.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
Can I style an accordion using only Markdown?
Markdown by itself does not support advanced styling or interactivity. You can create a basic collapsible accordion using the <details> and <summary> HTML tags within Markdown, but colours, borders, and animations require custom CSS applied through the Knowledge Base site settings.
What are the limitations of using Markdown for accordions?
- Browser support — the
<details>and<summary>elements work in most modern browsers but may not render correctly in all Markdown environments. - Styling — you cannot style the accordion beyond the default browser styles without adding custom CSS.
- Interactivity — accordion behaviour is limited to collapsing and expanding. Animations and advanced design options require CSS or JavaScript.
How do I create a basic accordion in Markdown?
Use the <details> and <summary> tags directly in the Markdown editor. This creates a collapsible accordion without any CSS or JavaScript. For enhanced styling, add custom CSS through Settings > Knowledge base site > Custom CSS & JavaScript.