How-To Apply Accordion

Complete the steps below to add an accordion to KB Articles

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.

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.

<details>
<summary>Accordion Summary</summary>
<p>Accordion Body</p>
</details>

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.

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.

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 <p></p> 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.

Pasting of HTML Accordion

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.