> For the complete documentation index, see [llms.txt](https://docs.codenation.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.codenation.com/campana/admin-tag-customisations/collapsed-accordions.md).

# Collapsed Accordions

Live demo: https\://campaign.codenation.com/donation\_v2

## Accordion (collapsed content)

Accordions can toggle through a number of textblocks with a single click, and that greatly enhances the UX of your page.

### What are accordions?

**An accordion** is a component that organizes content within collapsable items. 

**Accordions** can toggle through a number of text blocks with a single click, and that greatly enhances the UX of your page. 

See the gif below, and the live demo at <https://campaign.codenation.com/donation_v2>

![](https://1948373163-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LeL-FYaRUlvUn8HHUaD%2F-MJ9fkXStaNtkIqDTdPc%2F-MJ9hmOO56GXJKdSMeCH%2FzNucsXrzC4.gif?alt=media\&token=857817d3-1aca-447f-976c-5d51ab60ee55)

## How to add an accordion/collapsed content?

In the content of a page add 2 horizontal lines (`<hr>`) at the start of the headline and start of the content. See image below<br>

![](https://1948373163-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LeL-FYaRUlvUn8HHUaD%2F-MJ9fkXStaNtkIqDTdPc%2F-MJ9iUhqE5JzRdUbea66%2FScreenshot%202020-08-01%2012.52.30.png?alt=media\&token=8ef4f68f-eac9-4f75-845f-8ab7ec768f15)