# How-To Apply Accordion
{% 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 %}
## 1. Copy the Code Snippet
Select all of the HTML code in the area below. Use the copy icon in the upper right to copy everything in a single click.
```markup
Accordion Summary
Accordion Body
```
## 2. **Prepare Your Article**
In the editing view, place your cursor in the exact location you'd like for your accordion(s) to appear. Do so by clicking on a text line in the standard editor view. Accordions are typically placed at the very bottom of your article.
Refer to the animated GIF below for cursor placement. Click the GIF to magnify.
{% hint style="info" %}
Plan Ahead: It's a good idea to know how many accordions you will need. It will save you time when you begin pasting in the HTML source code.
{% endhint %}
## 3. View Source Code
Toggle the **Source Code** button in the editing toolbar as indicated by **< >** icons. Your cursor will automatically be placed in the code where you had specified in Step 2.
Refer to the image below for the Source Code button location. Click the image to magnify.
## 4. Find Your Cursor on an Empty Line
With the Source Code window open, find your cursor and press return(enter) to start a completely new and empty line. There should be nothing on the line except your blinking cursor. If you're HTML-savvy, you can delete the empty *``* element in the previous line.
Refer to the animated GIF below for cursor placement on an empty line. Click the GIF to magnify.
## 5. Paste Your Code
Paste your code snippet by pressing **CTRL+V (PC) or CMD+V** (Mac) once for every accordion that you need. For example, if you have three questions for an FAQ section, you will paste three times. Close the **Source Code** window when complete.
Refer to the animated image below for cursor placement. Click the image to magnify.
## 6. Enter Your Summary Text
Triple-click the placeholder text, "*Accordion Summary*". Once it's highlighted, begin typing or pasting your content over the existing text.
Refer to the image below for summary text replacing.
## 7. Enter Your Body Text
Triple-click the placeholder text, "*Accordion Body*". Once it's highlighted, begin typing or pasting your content over the existing text.
Refer to the image below for body text placement. Click the image to magnify it.
---
# 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/how-to-apply-accordion.md?ask=
```
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.