Skip to main content

KB: Using Accordions

Last updated

  1. Copy one of the code snippets below.
  2. Paste it in the desired location using the HTML editor.
  3. Update the accordion ID, ensuring each accordion on the page has a unique ID.
  4. Replace the "Your content goes here" with your content.
  5. Add the `accordion` tag to the article.
  6. Save the article.
  7. Ensure there are no errant spaces in-between the HTML tags
    NOTE: KnowledgeOwl likes to add spaces into places it shouldn't, which may make your shiny new accordion a little less shiny. So make sure there are no errant spaces in-between the HTML tags.

Accordion Code Snippet (Open)

<details class="row accordion open" data-group="default" open=""><summary tabindex="0">Accordion Title</summary><div id="accordion-1"><p>Your content goes here.</p></div></details>

Accordion Code Snippet (Closed)

<details class="row accordion" data-group="default"><summary tabindex="0">Accordion Title</summary><div id="accordion-2"><p>Your content goes here.</p></div></details>

Example Accordions

Accordion Title (Open)

Your content goes here.

Accordion Title (Closed)

Your content goes here.