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

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

The question should be specific, self-contained, and written in natural language.
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.