Effective on March 1st, 2023, Cruip CSS templates are no longer distributed, maintained or supported.
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 👇
<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><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).
TL;DR
The Accordion component has no props, it only returns the wrapping
<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.