> For the complete documentation index, see [llms.txt](https://guides.mangoapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guides.mangoapps.com/user-guide/widget-gallery/accordion-widget.md).

# Accordion Widget

### Overview

The Accordion widget is a versatile layout tool designed to organize high volumes of information into neat, collapsible sections. It is the ideal solution for FAQs, technical documentation, or any long-form page where you want to improve scan-ability and reduce "scroll fatigue."

<figure><img src="/files/ekYOrMfJgzKRYWi3pHY7" alt="" width="375"><figcaption></figcaption></figure>

The Accordion allows readers to expand only the sections they are interested in. This keeps your pages looking clean and professional while ensuring all the necessary details remain easily accessible.

Perfect for:

* **Frequently Asked Questions (FAQs)**: Hide answers until the user clicks the question.
* **Instructional Manuals**: Group steps by category or phase.
* **Policy Documents**: Organize complex HR or IT guidelines.
* **Project Updates**: Toggle between different workstreams or timelines.

***

#### Managing Content

Easily add new "panels" to your accordion with a single click.

<figure><img src="/files/kjzRbzPXqtgQ0wj9EXjx" alt="" width="563"><figcaption></figcaption></figure>

* **Rich Text Support**: Each collapsible section functions like a mini-editor, allowing you to include formatted text, bullet points, and hyperlinks.
* **Ordering**: Drag and drop sections to rearrange the hierarchy of your information.

***

#### Configuration Settings

When editing the widget properties, you can control how the accordion behaves for the end user:

* **Default State**: Choose whether the first section is expanded by default or if all sections start collapsed.
* **Expansion Mode**: Configure whether users can open multiple sections at once or if opening a new section automatically closes the previous one.

***

### User Experience

The Accordion widget provides a smooth, interactive experience across all platforms:

* **Navigable Layout**: Users can quickly scan headers to find the specific information they need without scrolling through irrelevant content.
* **Mobile-Friendly**: The collapsible nature of the widget is particularly effective on mobile devices, where screen real estate is limited.
* **Smooth Transitions**: High-quality animations provide visual feedback as sections expand and collapse, making the interface feel responsive and modern.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://guides.mangoapps.com/user-guide/widget-gallery/accordion-widget.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
