Foundation
Jump to Nav

# Responsive Accordion Tabs

JavaScript

Use the Markup of the Accordion or Tabs components to create Responsive Accordion Tabs.

## Basics

Either the Accordion Markup or the Tabs Markup can be used to responsively switch between the two components at different breakpoints.

The Accordion should have an id specified, but the plugin will automatically generate one if the id is omitted.

Accordion content should also have an ID, or the # of the href should be specified, otherwise a random id will be generated

    <ul class="accordion" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
      <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!
Scale your browser down to see the toggle happen.
I am an `Accordion on small and large` but I am `Tabs on medium`

- Accordion 1

  Panel 1. Lorem ipsum dolor

  Nowhere to Go
- Accordion 2
- Accordion 3
  Pick a date!

Tabs HTML Markup

    <div class="tabs-content" data-tabs-content="example-tabs">
      <div class="tabs-panel is-active" id="panel1">
        <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
      </div>
      <div class="tabs-panel" id="panel2">
        <p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
      </div>
    </div>

Once you put it all together, here's what you get!
Scale your browser down to see the toggle happen.
I am `Tabs on small and large` and `Accordion on medium`

- Tab 1
- Tab 2
- Tab 3
- Tab 4
- Tab 5
- Tab 6

one

Check me out! I'm a super cool Tab panel with text content!

two

three

Check me out! I'm a super cool Tab panel with text content!

four

five

Check me out! I'm a super cool Tab panel with text content!

six

The responsive behavior can be set through the `data-responsive-accordion-tabs` option.
`tabs|accordion` , `medium-tabs|accordion` , `large-tabs|accordion` sets the behavior

## Plugin Options

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.

All `data-options` from Accordion or Tabs can be passed through.

## 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 `true`, adds plus and minus icons to the side of each accordion title.
`$accordion-title-font-size` | Number | `rem-calc(12)` | Font size of accordion titles.
`$accordion-item-color` | Color | `$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 | `$body-font-color` | Default text color of tab content.
`$accordion-content-padding` | Number or List | `1rem` | Default padding for tab content.
`$tab-margin` | Number | `0` | Default margin of the tab bar.
`$tab-background` | Color | `$white` | Default background color of a tab bar.
`$tab-color` | Color | `$primary-color` | Font color of tab item.
`$tab-background-active` | Color | `$light-gray` | Active background color of a tab bar.
`$tab-active-color` | Color | `$primary-color` | Active font color of tab item.
`$tab-item-font-size` | Number | `rem-calc(12)` | Font size of tab items.
`$tab-item-background-hover` |  | `$white` | Default background color on hover for items in a Menu.
`$tab-item-padding` | Number | `1.25rem 1.5rem` | Default padding of a tab item.
`$tab-expand-max` | Number | `6` | Maximum number of `expand-n` classes to include in the CSS.
`$tab-content-background` | Color | `$white` | Default background color of tab content.
`$tab-content-border` | Color | `$light-gray` | Default border color of tab content.
`$tab-content-color` | Color | `$body-font-color` | Default text color of tab content.
`$tab-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.

#### tabs-container

    @include tabs-container;

Adds styles for a tab container. Apply this to a `<ul>`.

#### tabs-container-vertical

    @include tabs-container-vertical;

Augments a tab container to have vertical tabs. Use this in conjunction with `tabs-container()`.

#### tabs-title

    @include tabs-title;

Adds styles for the links within a tab container. Apply this to the `<li>` elements inside a tab container.

#### tabs-content

    @include tabs-content;

Adds styles for the wrapper that surrounds a tab group's content panes.

#### tabs-content-vertical

    @include tabs-content-vertical;

Augments a tab content container to have a vertical style, by shifting the border around. Use this in conjunction with `tabs-content()`.

#### tabs-panel

    @include tabs-panel;

Adds styles for an individual tab content panel within the tab content container.

## JavaScript Reference

### Initializing

The file `foundation.zf.responsiveAccordionTabs.js` must be included in your JavaScript to use this plugin, along with `foundation.core.js`. This plugin also requires these utility libraries:

- `foundation.util.keyboard.js`

- `foundation.util.timerAndImageLoader.js`

- `foundation.util.motion.js`

- `foundation.accordion.js`

- `foundation.tabs.js`

### Foundation.ResponsiveAccordionTabs

Creates a new instance of a responsive accordion tabs.

    var elem = new Foundation.ResponsiveAccordionTabs(element, options);

Fires these events: ResponsiveAccordionTabs#event:init

Name | Type | Description
--- | --- | ---
`element` | jQuery | jQuery object to make into a dropdown menu.
`options` | Object | Overrides to the default plugin settings.

### Methods

#### destroy

    $('#element').foundation('destroy');

Destroys the instance of the current plugin on this element, as well as the window resize handler that switches the plugins out.