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. 
Basic elements - Previous
Form example
Next - Basic elements
Carousel
Last updated 8 months ago
Prop	Type	Default	Accepted values
`active`	boolean	`false`	-
`title` (required)	string	-	-