Accordion

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

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.