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-plus-content`	String	`'\002B'`	Content for the plus icon when `$accordion-plusminus` is `true`
`$accordion-minus-content`	String	`'\2013'`	Content for the minus icon when `$accordion-plusminus` is `true`
`$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-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 following files must be included in your JavaScript to use this plugin:

foundation.core.js
foundation.responsiveAccordionTabs.js
- With utility library foundation.util.motion.js
- With utility library foundation.accordion.js
- With utility library 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

open

$('#element').foundation('open', target);

Opens the plugin pane defined by target.

Name	Type	Description
`target`	jQuery	jQuery object or string of the id of the pane to open.

close

$('#element').foundation('close', target);

Closes the plugin pane defined by target. Not availaible for Tabs.

Name	Type	Description
`target`	jQuery	jQuery object or string of the id of the pane to close.

toggle

$('#element').foundation('toggle', target);

Toggles the plugin pane defined by target. Not availaible for Tabs.

Name	Type	Description
`target`	jQuery	jQuery object or string of the id of the pane to toggle.

_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.