✨ Get all templates and new upcoming releases for just $69. Limited time offer ✨

Accordion

Cruip CSS

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.

Accordion component

<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.
Last updated on August 17, 2021