Files

• _accordions.scss
• accordions.js
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/accordions

Module Overview

Examples

<div class="accordion">
    <section class="accordion_section">
        <h4 class="accordion_title">...</h4>
        <p class="accordion_content">...</p>
    </section>
    <section class="accordion_section">
        <h4 class="accordion_title">...</h4>
        <p class="accordion_content">...</p>
    </section>
    <section class="accordion_section">
        <h4 class="accordion_title">...</h4>
        <p class="accordion_content">...</p>
    </section>
</div>

Open By Default

<div class="accordion">
    <section>
        ...
    </section>
    <section class="active">
        ...
    </section>
    <section>
        ...
    </section>
</div>

Multiple Open Items (Hint: click more than one accordion item)

<div class="accordion-keep-open">
    ...
</div>

Minimal (+ Multiple Open Items)

<div class="accordion-minimal-keep-open">
    <section class="object active">
        <header class="heading_group-small">
            <h4 class="heading-size-4-border">Accordion Title</h4>
        </header>
    </section>
    <div><p>...</p></div>
    <section class="object">
        <header class="heading_group-small">
            <h4 class="heading-size-4-border">Accordion Title</h4>
        </header>
    </section>
    <div><p>...</p></div>
    <section class="object">
        <header class="heading_group-small">
            <h4 class="heading-size-4-border">Accordion Title</h4>
        </header>
    </section>
    <div><p>...</p></div>
</div>

Styleless

The only thing required for the accordion functionality is the main `accordion` class on the parent element. As long as the format of your elements is correct, they will be converted into an accordion. This leaves you free to style them how you wish, or allows you to use existing theme styles to create your own accordion (such as the above example).

You probably will want to add some sort of styling, as you can see the naked accodion isn't a pretty sight...

<div class="accordion">
    <div>
        <div>Accordion Title</div>
        <div>...</div>
    </div>
    <div>
        <div>Accordion Title</div>
        <div>...</div>
    </div>
    <div>
        <div>Accordion Title</div>
        <div>...</div>
    </div>
</div>

Customizing

The accordion can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
icon	"\f138"	The content value for any FontAwesome icon to act as the open/close symbol.
icon-color	rgba(color('greyscale', 'grey-3'), 0.6)	The color for the open/close icon.
icon-active-color	color('greyscale', 'white')	The color for the open/close icon when the corresponding section is open.
section-margin	0	The vertical spacing between each accordion section.
title-bg	transparent	The background color for the accordion title (the clickable part).
title-color	typograhy('colors', 'base')	The text color for the accordion title (the clickable part).
title-border	1px solid rgba(black, 0.15)	The border for the accordion title (the clickable part).
title-radius	0	The border-radius for the accordion title (the clickable part).
title-padding	1em	The padding for the accordion title (the clickable part).
title-active-bg	color('brand', 'primary')	The background color for the accordion title when the corresponding section is open.
title-active-color	color('greyscale', 'white')	The text color for the accordion title when the corresponding section is open.
title-active-border	transparent	The border for the accordion title when the corresponding section is open.
title-active-radius	0	The border-radius for the accordion title when the corresponding section is open.
content-bg	color('greyscale', 'white')	The backgound for the accordion content.
content-color	typograhy('colors', 'base')	The text color for the accordion content.
content-border	1px solid rgba(black, 0.15)	The border for the accordion content.
content-radius	0	The border-radius for the accordion content.
content-padding	1em	The padding for the accordion content.

To change one of the above values, pass your new value(s) to the accordions() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include accordions((
    icon-color      : rgba(white, 0.6),
    title-bg        : color('brand', 'primary'),
    title-color     : white,
    title-active-bg : darken(color('brand', 'primary'), 10%)
));

---

@include accordions((
    section-margin      : 1.4em,
    title-radius        : 0.4em,
    title-active-radius : 0.4em 0.4em 0 0,
    content-radius      : 0 0 0.4em 0.4em
));