# Accordion

<figure><img src="/files/eYRyBNEcRsxNQjvSaNDP" alt=""><figcaption></figcaption></figure>

The Accordion component enhances your application's user experience by allowing users to show and hide related content sections on a page. This feature is perfect for organizing content in a compact, efficient manner, making it easier for users to navigate and find the information they need. For example, users can quickly find answers to their questions in a FAQ section without scrolling through all the content.&#x20;

<figure><img src="/files/Y4TapzrmruDxfKxQ95LG" alt=""><figcaption></figcaption></figure>

* **Space-saving:** Organize large amounts of content efficiently.
* **Improved navigation:** Easy for users to find specific information without scrolling.
* **Enhanced user experience:** Interactive and engaging, keeping the interface clean and tidy.
* **Accessibility:** Properly implemented, it can support screen readers and keyboard navigation.

Customize the Accordion component to suit your application's needs.

**Configuration Options**

* **Add Multiple Sections**: Easily add multiple sections within the Accordion to categorize and organize related content effectively. Each section can have its own header and content, allowing for a structured and detailed presentation of information.
* **Allow Opened Sections**: Enable or disable the ability for multiple sections to be opened simultaneously. When this feature is enabled, users can view multiple sections at once, providing a comprehensive view of the content. If disabled, only one section can be open at a time, keeping the interface clean and focused.
* **Opened/Closed Indicator**: Include visual indicators to show whether a section is opened or closed. These indicators enhance user experience by providing clear, immediate feedback on the state of each section, making it easy to navigate through the content.

<figure><img src="/files/L1ogia58kAIySAfUG1hq" alt=""><figcaption></figcaption></figure>


---

# 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://docs.jetadmin.io/user-guide/design-and-structure/components/layouts/accordion.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.