Accordions

  The documentation pages are still being written, please bear with us.

Quick Look

<div class="accordion">
    <div class="accordion_section">
        <div class="accordion_title">Accordion Title</div>
        <div class="accordion_content">
            <p>Lorem ipsum.</p>
        </div>
    </div>
    <div class="accordion_section">
        <div class="accordion_title">Accordion Title</div>
        <div class="accordion_content">
            <p>Lorem ipsum.</p>
        </div>
    </div>
</div>

Sass

Load the accordion styles by including the accordions() mixin:

@include accordions();

The following options can be passed to the mixin to customize the accordions:

Option	Description	Default
name	The name used when generating the CSS selector	'accordion'
output-json	Allows the configutation to be accessed in JavaScript	true
icon	The content value for a Font Awesome icon	'\f138'
icon-color	The color for the open/close icon	rgba(color('greyscale', 'grey-3'), 0.6)
icon-active-color	The color for the open/close icon when the corresponding section is open	color('greyscale', 'white')
section-margin	The vertical spacing between each accordion section	0
title-bg	The background color for the accordion title (the clickable part)	transparent
title-color	The text color for the accordion title (the clickable part	core('text-color')
title-border	The border for the accordion title (the clickable part)	1px solid rgba(black, 0.15)
title-radius	The border-radius for the accordion title (the clickable part)	0
title-padding	The padding for the accordion title (the clickable part	1em
title-active-bg	The background color for the accordion title when the corresponding section is open	color('brand', 'brand-1')
title-active-color	The text color for the accordion title when the corresponding section is open	color('greyscale', 'white')
title-active-border	The border for the accordion title when the corresponding section is open	transparent
title-active-radius	The border-radius for the accordion title when the corresponding section is open	0
content-bg	The backgound for the accordion content	color('greyscale', 'white')
content-color	The text color for the accordion content	core('text-color')
content-border	The border for the accordion content	1px solid rgba(black, 0.15)
content-radius	The border-radius for the accordion content	0
content-padding	The padding for the accordion content	1.5em

The above options can be passed to the mixin like so:

@include accordions((
    'section-margin': 1.4em,
    'icon': '\f101',
    'title-bg': #23241f,
    'title-color': white,
    'title-radius': 0.4em,
    'title-active-bg': #9B58B5,
    'title-active-radius': 0.4em 0.4em 0 0,
    'content-padding': 1em,
    'content-radius': 0 0 0.4em 0.4em
));

The above example produces the following accordion:

JavaScript

Call the accordion() function on your accordion selector:

$('.foo').accordion();
$(_accordion).accordion();

The default One-Nexus theme uses Synergy's global module selector: $(_accordion)

The following options can be passed to the function to customize the accordions:

Option	Description	Default
activeClass	The class to use to open an accordion section	'active'
animationSpeed	The duration of the open/close animation	_baseTransition
keepOpenSelector	The selector to use on the main module to allow multiple sections to be open simultaneously	_modifier('keepOpen')

The above options can be passed to the function like so:

$(_accordion).accordion({
    activeClass: 'toggled',
    animationSpeed: 500
});

Examples

Open by Default

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

Multiple Open Sections

<div class="accordion-keepOpen">
    <div class="accordion_section">
        ...
    </div>
    <div class="accordion_section">
        ...
    </div>
</div>