zurb-foundation-5
Version:
Foundation 5 for npm (no code modification from original repo)
174 lines (135 loc) • 3.88 kB
HTML
---
title: Accordion
---
<h3 class="subheader">Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.</h3>
***
{{> examples_accordion_intro}}
***
<h3>Basic</h3>
You can create an accordion using minimal markup like so:
<div class="row">
<div class="large-6 columns">
<h4>HTML</h4>
{{#markdown}}
```html
{{> examples_accordion_basic}}
```
{{/markdown}}
</div>
<div class="large-6 columns">
<h4>Rendered HTML</h4>
{{> examples_accordion_basic}}
</div>
</div>
<div class="panel"><p>Note: Accordion used to require ```<dl>``` and ```<dd>``` markup. It now works with ```<ul>```'s and ```<li>```'s as well.</p></div>
***
<h3>Distributed accordion groups</h3>
You can name the accordion so that it can be spread across different parent containers. In this example the accordion is named *myAccordionGroup* and it is split between different columns in a block grid. This allows the accordion to be responsive to screen width.
<div class="row">
<div class="large-6 columns">
<h4>HTML</h4>
{{#markdown}}
```html
{{> examples_accordion_grid}}
```
{{/markdown}}
</div>
<div class="large-6 columns">
<h4>Rendered HTML</h4>
{{> examples_accordion_grid}}
</div>
</div>
***
### Callbacks
There are two ways to bind to callbacks in your tabs.
<div class="row">
<div class="large-6 columns">
{{#markdown}}
<h4>Callback function</h4>
```html
<script>
$(document).foundation({
accordion: {
callback : function (accordion) {
console.log(accordion);
}
}
});
</script>
```
{{/markdown}}
</div>
<div class="large-6 columns">
{{#markdown}}
<h4>Toggled Event</h4>
```html
<script>
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
```
{{/markdown}}
</div>
</div>
***
## Customize with Sass
Accordions can be easily customized with the Sass variables provided in the `_settings.scss` file.
<h4>SCSS</h4>
{{> examples_accordion_variables}}
***
## Configure With Javascript
It's easy to configure dropdowns using our provided Javascript. You can use data-attributes or plain old Javascript. Make sure `jquery.js`, `foundation.js` and `foundation.accordion.js` have been included on your page before continuing. For example, add the following before the closing `<body>` tag:
{{#markdown}}
```html
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
```
{{/markdown}}
### Optional Javascript Configuration
#### JS
{{#markdown}}
```js
$(document).foundation({
accordion: {
// specify the class used for accordion panels
content_class: 'content',
// specify the class used for active (or open) accordion panels
active_class: 'active',
// allow multiple accordion panels to be active at the same time
multi_expand: false,
// allow accordion panels to be closed by clicking on their headers
// setting to false only closes accordion panels when another is opened
toggleable: true
}
});
```
{{/markdown}}
***
## Semantic Markup With Sass Mixins
You can use the a `accordion-container()`, `accordion-navigation`, and `accordion-navigation` mixins to create your own accordion with semantic markup, like so:
<div class="row">
<div class="large-12 columns">
<h4>SCSS</h4>
{{#markdown}}
```scss
.your-accordion-class {
@include accordion-container;
.your-accordion-navigation-class {
@include accordion-navigation;
}
.your-accordion-content-class {
@include accordion-content;
}
}
```
{{/markdown}}
</div>
</div>
##### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
<h4>SCSS</h4>
```scss
@import "foundation/components/accordion";
```