Accordion
JavaScriptAccordions are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.
Basics
The container for an accordion needs the class .accordion, and the attribute data-accordion. Note that in these examples, we use a <ul>, but you can use any element you want.
<ul class="accordion" data-accordion></ul>
Inside the accordion, place a series of panes with the class .accordion-item and the attribute data-accordion-item. To mark which pane should be open by default, add the class .is-active to that pane.
Each pane has a title, an <a> with the class .accordion-title, and a content area, an element with the class .accordion-content and the attribute data-tab-content.
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
I would start in the open state, due to using the `is-active` state class.
</div>
</li>
<!-- ... -->
</ul>
Once you put it all together, here's what you get!
-
Accordion 1
Panel 1. Lorem ipsum dolor
Nowhere to Go -
Accordion 2
-
Accordion 3
Pick a date!
Advanced Options
Multi-expand
By default, only one pane of an accordion can be open at a time. This can be changed by setting the multiExpand option to true.
<ul class="accordion" data-accordion data-multi-expand="true">
<!-- ... -->
</ul>
-
Accordion 1
Panel 1. Lorem ipsum dolor
-
Accordion 2
Panel 2. Lorem ipsum dolor
-
Accordion 3
Panel 3. Lorem ipsum dolor
All Closed
By default, at least one pane in an accordion must be open. This can be changed by setting allowAllClosed option to true.
<ul class="accordion" data-accordion data-allow-all-closed="true">
<!-- ... -->
</ul>
-
Accordion 1
Panel 1. Lorem ipsum dolor
-
Accordion 2
Panel 2. Lorem ipsum dolor
-
Accordion 3
Panel 3. Lorem ipsum dolor
Sass Reference
Variables
The default styles of this component can be customized using these Sass variables in your project's settings file.
| Name | Type | Default Value | Description |
|---|---|---|---|
$accordion-background |
Color | $white |
Default background color of an accordion group. |
$accordion-plusminus |
Boolean | true |
If |
$accordion-item-color |
Color | foreground($accordion-background, $primary-color) |
Default text color for items in a Menu. |
$accordion-item-background-hover |
Color | $light-gray |
Default background color on hover for items in a Menu. |
$accordion-item-padding |
Number or List | 1.25rem 1rem |
Default padding of an accordion item. |
$accordion-content-background |
Color | $white |
Default background color of tab content. |
$accordion-content-border |
Color | 1px solid $light-gray |
Default border color of tab content. |
$accordion-content-color |
Color | foreground($accordion-content-background, $body-font-color) |
Default text color of tab content. |
$accordion-content-padding |
Number or List | 1rem |
Default padding for tab content. |
Mixins
We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.
accordion-container
@include accordion-container;Adds styles for an accordion container. Apply this to the same element that gets data-accordion.
accordion-item
@include accordion-item;Adds styles for the accordion item. Apply this to the list item within an accordion ul.
accordion-title
@include accordion-title;Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
accordion-content
@include accordion-content;Adds styles for accordion content. Apply this to the content pane below an accordion item's title.
JavaScript Reference
Initializing
The following files must be included in your JavaScript to use this plugin:
foundation.core.js-
foundation.accordion.js- With utility library
foundation.util.keyboard.js - With utility library
foundation.util.motion.js
- With utility library
Foundation.Accordion
Creates a new instance of an accordion.
var elem = new Foundation.Accordion(element, options);Fires these events: Accordion#event:init
| Name | Type | Description |
|---|---|---|
element |
jQuery | jQuery object to make into an accordion. |
options |
Object | a plain object with settings to override the default options. |
Plugin Options
Use these options to customize an instance of Accordion. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.
| Name | Type | Default | Description |
|---|---|---|---|
data-slide-speed |
|
|
Amount of time to animate the opening of an accordion pane. |
data-multi-expand |
|
|
Allow the accordion to have multiple open panes. |
data-allow-all-closed |
|
|
Allow the accordion to close all panes. |
Events
These events will fire from any element with a Accordion plugin attached.
| Name | Description |
|---|---|
down.zf.accordion |
Fires when the tab is done opening. |
up.zf.accordion |
Fires when the tab is done collapsing up. |
Methods
toggle
$('#element').foundation('toggle', $target);Toggles the selected content pane's open/close state.
| Name | Type | Description |
|---|---|---|
$target |
jQuery | jQuery object of the pane to toggle. |
down
$('#element').foundation('down', $target, firstTime);Opens the accordion tab defined by $target.
Fires these events: Accordion#event:down
| Name | Type | Description |
|---|---|---|
$target |
jQuery | Accordion pane to open. |
firstTime |
Boolean | flag to determine if reflow should happen. |
up
$('#element').foundation('up', $target);Closes the tab defined by $target.
Fires these events: Accordion#event:up
| Name | Type | Description |
|---|---|---|
$target |
jQuery | Accordion tab to close. |
destroy
$('#element').foundation('destroy');Destroys an instance of an accordion.
Fires these events: Accordion#event:destroyed
