Accordion
Build vertically collapsing accordions in combination with Collapse JavaScript plugin.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                accordion: true, // Requires 'collapse' component
                collapse: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>
NameDescription
.accordionBase class of the accordion component
.accordion.accordion-separatedApplies separated style to the accordion
.accordion.accordion-flushApplies flush style to the accordion
.accordion.accordion-cozyApplies cozy spacing to the accordion
.accordion > .accordion-itemBase class of a single accordion item wrapper within the accordion
.accordion > .accordion-item > .accordion-headerBase class of the header wrapper within an accordion item
.accordion > .accordion-item > .accordion-header > .accordion-buttonBase class of the clickable button that collapse/expand the accordion item within the accordion item's header
.accordion > .accordion-item > .accordion-collapseBase class of the collapsable content area within the accordion item
.accordion > .accordion-item > .accordion-collapse > .accordion-bodyBase class of the accordion item body within the collapsable element
Customize variables at:/library/extend/components/_accordion.scss
Component's defaults:/library/components/accordion/_defaults.scss
NameDefault valueNote
$accordion-button-font-size$font-size-base
$accordion-button-font-weight500
$accordion-padding-y1rem
$accordion-padding-x1.25rem
$accordion-colorproperty.get(main-text-color)Requires @use "@library/sass/modules/property";
$accordion-bgtransparent
$accordion-border-width$border-width
$accordion-border-colorproperty.get(divider)Requires @use "@library/sass/modules/property";
$accordion-border-radius$border-radius
$accordion-body-padding-y$accordion-padding-y
$accordion-body-padding-x$accordion-padding-x
$accordion-button-padding-y$accordion-padding-y
$accordion-button-padding-x$accordion-padding-x
$accordion-cozy-button-font-size$font-size-lg
$accordion-cozy-button-font-weight500
$accordion-cozy-body-padding-y1.5rem
$accordion-cozy-body-padding-x1.5rem
$accordion-cozy-button-padding-y$accordion-cozy-body-padding-y
$accordion-cozy-button-padding-x$accordion-cozy-body-padding-x
$accordion-button-color$accordion-color
$accordion-button-bg$accordion-bg
$accordion-transitionall .15s ease
$accordion-button-active-bgproperty.get(primary-t-04)Requires @use "@library/sass/modules/property";
$accordion-button-active-colorproperty.get(primary)Requires @use "@library/sass/modules/property";
$accordion-button-focus-border-colorproperty.get(primary-t-34)Requires @use "@library/sass/modules/property";
$accordion-button-focus-box-shadow0 0 0 .25rem property.get(primary-t-08)Requires @use "@library/sass/modules/property";
$accordion-icon-width18px
$accordion-icon-transitiontransform .2s ease-in-out
$accordion-icon-transformnone
$accordion-button-iconurl("data:image/svg+xml,<svg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'><path d='M14 10H10V14H8V10H4V8H8V4H10V8H14V10Z' fill='#{theme.get(default, true, ui-base-color-6)}' /></svg>")Requires @use "@library/sass/modules/theme";
$accordion-button-active-iconurl("data:image/svg+xml,<svg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'><path d='M14 10H4V8H14V10Z' fill='#{theme.get(default, true, primary)}' /></svg>")Requires @use "@library/sass/modules/theme";
$accordion-button-icon-alturl("data:image/svg+xml,<svg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'><path d='M14 10H10V14H8V10H4V8H8V4H10V8H14V10Z' fill='#{theme.get(default, true, ui-base-color-6)}' /></svg>")Requires @use "@library/sass/modules/theme";
$accordion-button-active-icon-alturl("data:image/svg+xml,<svg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'><path d='M14 10H4V8H14V10Z' fill='#{theme.get(default, true, primary)}' /></svg>")Requires @use "@library/sass/modules/theme";

Make sure to read the Customize components and Understanding and using the design system guides.

{title}