Accordions let you hide additional information under a clickable title. Readers can expand only the sections they need, which makes long articles easier to scan.
Example:
This is a sample accordion title. Click to expand
A text accordion box is a collapsible UI component that stacks a list of headers and expands to reveal hidden text content when clicked.
It is perfect for compressing long text, FAQs, or navigation lists into a sleek space-saving layout.
When to use accordions
Accordions are useful when you want to keep your article clean and easy to navigate. You can use them for:
- FAQ sections
- Long explanations
- Troubleshooting steps
- Optional details
- Extra instructions that not every reader needs
How to add an accordion
Open the article editor and place your cursor where you want to add an accordion.
- Hit Enter to open the context menu, then choose Accordion.
- Replace the "Accordion summary..." with your text. This is the text users will click to expand or collapse the section.
- Replace the text in "Accordion body...". You can include additional explanations, instructions, or other useful details.
.gif)
Tip: The accordion keeps the same state after you save the article.
If you save the article with the accordion expanded, it will be expanded when users open the page. If you save it collapsed, it will be collapsed by default.
Edit or delete an accordion
Click inside the accordion section to edit its title or content. Use the little trash icon to remove the accordion and its text.
.gif)
