# Accordion

![](/files/-MYLuvrnYtIJwsKGVGHI)

{% hint style="info" %}
Accordion styles are not rendered while editing the article or in the agent portal. View your article in the Service Portal for an accurate depiction of your content.
{% endhint %}

{% hint style="danger" %}
There's is a known bug when pasting body content into an accordion that causes the accordion to be "open" by default. This may be desirable for the first item in a list of accordions, but it defeats the purpose if all of them are open. [Read about the workaround. ](/components/accordions-coming-soon/accordion-bug.md)
{% endhint %}

## Purpose

The accordion component delivers large amounts of content in a small space through progressive disclosure. The header title gives the user a high-level overview of the content allowing the user to decide which sections to read.

Accordions can make information processing and discovery more effective. However, it does hide content from users and it’s important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don’t use an accordion as it adds the burden of an extra click; instead, use a full scrolling page with normal headers.

## Use Case

Refer to the screenshot for an example of accordions in use. Components of a sandwich are broken into individual accordions. The details of each sandwich component are inside of the accordion's body. Click the image to magnify it.

![Sample of an accordion in use.](/files/-MTqzYu_lb6smFntVLvN)

## Accordion Composition

A single accordion is comprised of two parts:

### 1: Summary

The summary is also considered the title or the heading of an accordion. If using an accordion for an FAQ, the summary is where you would place the question. Refer to the image below for an example of the summary. Click the image to magnify.

![](/files/-MWgyX1C6IUhxF6DaZT_)

### 2: Body

The body is the bulk of your content and the impetus for using an accordion at all. If using an accordion for an FAQ, the body is where you would place your answer to the question. Refer to the image below for an example of the body section. Click the image to magnify.

![](/files/-MWgyX1C6IUhxF6DaZT_)

## Ready to Apply?

Proceed to the link below to get started.

{% content-ref url="/pages/-MU2NkfLMtlesuV6FS\_f" %}
[How-To Apply Accordion](/components/accordions-coming-soon/how-to-apply-accordion.md)
{% endcontent-ref %}


---

# 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://kmdesign.services.gatech.edu/components/accordions-coming-soon.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.