6.8 KiB
| title | description | video | sass | js | tags | |||
|---|---|---|---|---|---|---|---|---|
| Responsive Accordion Tabs | Added in 6.3.0, use the Markup of the Accordion or Tabs components to create Responsive Accordion Tabs. | FKzzaWR6j2M |
|
js/foundation.responsiveAccordionTabs.js |
|
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
I do nothing!
-
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`
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
`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.