Accordion

General information

The accordion element is a simple unordered list like the example below. You can add the .is-active class to make one or more accordions expanded by default.

<ul class="accordion list-reset mb-0">
<li class="is-active">
<div class="accordion-header text-sm">
<span>Nisi porta lorem mollis aliquam ut.</span>
<div class="accordion-icon"></div>
</div>
<div class="accordion-content text-xs">
<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
</div>
</li>
<li>
<div class="accordion-header text-sm">
<span>Nisi porta lorem mollis aliquam ut.</span>
<div class="accordion-icon"></div>
</div>
<div class="accordion-content text-xs">
<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
</div>
</li>
<li>
<div class="accordion-header text-sm">
<span>Nisi porta lorem mollis aliquam ut.</span>
<div class="accordion-icon"></div>
</div>
<div class="accordion-content text-xs">
<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
</div>
</li>
</ul>

In the example above we are using a few helper classes (e.g. .list-reset, .mb-0, .text-sm, .text-xs) to reset the default list style, and to adjust bottom spacing and font size.

The same result can be achieved in React and Vue using the code below 👇

React
Vue
React
<Accordion>
<AccordionItem title="Nisi porta lorem mollis aliquam ut." active>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</AccordionItem>
<AccordionItem title="Nisi porta lorem mollis aliquam ut.">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</AccordionItem>
<AccordionItem title="Nisi porta lorem mollis aliquam ut.">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</AccordionItem>
</Accordion>
Vue
<c-accordion>
<c-accordion-item title="Nisi porta lorem mollis aliquam ut." active>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</c-accordion-item>
<c-accordion-item title="Nisi porta lorem mollis aliquam ut.">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</c-accordion-item>
<c-accordion-item title="Nisi porta lorem mollis aliquam ut.">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</c-accordion-item>
</c-accordion>

As you know, an accordion is made of a wrapping component (Accordion in React, c-accordion in Vue) and each accordion has its own component (AccordionItem in React, c-accordion-item in Vue).

Pass the title prop for the item title, and the active prop if you want to make the accordion expanded by default.

TL;DR

The Accordion component has no props, it returns the wrapping only<ul>.

React props (Accordion Item component)

Prop

Type

Default

Accepted values

active

boolean

false

-

title (required)

string

-

-

Vue props (Accordion Item component)

Prop

Type

Default

Accepted values

active

boolean

false

-

title (required)

string

-

-

Theming

Style is defined into 3 files:

📋 Core file

src/assets/scss/core/elements/_accordion.scss

👆🚫 Don't edit this file!

📋 Settings file

src/assets/scss/settings/elements/_accordion.scss

👆Use this to adjust Sass variables

📋 Theme file

src/assets/scss/theme/elements/_accordion.scss

👆Use this to add custom CSS

Learn more about the Sass logic behind each template.