【Javascript】flexboxで構築されたレスポンシブ対応のタブシステム。flextabs

flextabsはflexboxで構築されたレスポンシブ対応のタブシステム。

CSS

<link href="flextabs.css" rel="stylesheet">

Javascript

<script src="flextabs.js"></script>
var targets = document.querySelectorAll('.flextabs');
for (var i = 0; i < targets.length; i += 1) {
var tabs = flextabs(targets[i]);
tabs.init();
}

Example Markup

<div class="flextabs">
<h3 class="flextabs__tab">
<button class="flextabs__toggle">Toggle</button>
</h3>
<div class="flextabs__content">
<p>Tab 1 content</a></p>
</div>
<h3 class="flextabs__tab">
<button class="flextabs__toggle">Toggle</button>
</h3>
<div class="flextabs__content">
<p>Tab 2 content</p>
</div>
<h3 class="flextabs__tab">
<button class="flextabs__toggle">Toggle</button>
</h3>
<div class="flextabs__content">
<p>Tab 3 content</p>
</div>
</div>

Example CSS

@media (min-width: 64em) {
.flextabs__tab {
/* shift all tabs to appear before content */
order: -1;
/* let tabs scale to fit multiple on each row */
width: auto;
}
.flextabs__content--active {
/* ignore states activated for multi (accordion) toggle view */
display: none;
}
.flextabs__content--active--last {
/* show the last activated item */
display: block;
}
}

Classes

Primary

  1. flextabs__tab
  2. flextabs__toggle
  3. flextabs__content

State

  1. flextabs__toggle--active, flextabs__content--active
  2. flextabs__toggle--active--last, flextabs__content--active--last

MITライセンス

 
flextabs

【Javascript】flexboxで構築されたレスポンシブ対応のタブシステム。flextabs

  • LATEST
  • RELATED
  • POPULAR