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

edit on codepen button
<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

Tabs HTML Markup

Watch this part in video

edit on codepen button
<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

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.

NameTypeDefault ValueDescription
$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

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