Responsive Accordion Tabs

JavaScript

Added in 6.3.0, 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

The accordion/tabs values can be in any order.

Accordion HTML Markup

Watch this part in video

<ul class="accordion" data-responsive-accordion-tabs="accordion medium-tabs large-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!
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

Watch this part in video

<ul class="tabs" data-responsive-accordion-tabs="tabs medium-accordion large-tabs" id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
  <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
  <li class="tabs-title"><a href="#panel4">Tab 4</a></li>
  <li class="tabs-title"><a href="#panel5">Tab 5</a></li>
  <li class="tabs-title"><a href="#panel6">Tab 6</a></li>
</ul>

<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <p>one</p>
    <p>Check me out! I'm a super cool Tab panel with text content!</p>
  </div>
  <div class="tabs-panel" id="panel2">
    <p>two</p>
    <img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
  </div>
  <div class="tabs-panel" id="panel3">
    <p>three</p>
    <p>Check me out! I'm a super cool Tab panel with text content!</p>
  </div>
  <div class="tabs-panel" id="panel4">
    <p>four</p>
    <img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
  </div>
  <div class="tabs-panel" id="panel5">
    <p>five</p>
    <p>Check me out! I'm a super cool Tab panel with text content!</p>
  </div>
  <div class="tabs-panel" id="panel6">
    <p>six</p>
    <img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
  </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 Responsive Accordion Tabs.
`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.