Javascript

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

June 19, 2016
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ライセンス