My Digital Buildings

Responsive Accordion Tabs

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.