Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html id="top" lang="en" class="js">
<head>
<meta name="viewport" content="width=device-width">
<meta content-type="utf-8" />
<title>Tabs</title>
</head>
<body>
​
  <ul role="tablist" class="tabs">
    <li><a role="tab" aria-controls="dizzy" class="tab" href="#dizzy">Dizzy</a></li>
    <li><a role="tab" aria-controls="ninja" class="tab" href="#ninja">Ninja</a></li>
    <li><a role="tab" class="tab" aria-controls="missy" href="#missy">Missy</a></li>
  </ul>
​
  <div role="tabpanel" class="panel" id="dizzy">
    <img src="https://jsbin-user-assets.s3.amazonaws.com/rem/dizzy.jpg" alt="Photo of Dizzy">
    <dl>
      <dt>Name</dt>
      <dd>Dizzy</dd>
      <dt>Colour</dt>
      <dd>Tabby</dd>
      <dt>Super power</dt>
      <dd>Sleeping</dd>
    </dl>
  </div>
  <div role="tabpanel" class="panel" id="ninja">
    <img src="https://jsbin-user-assets.s3.amazonaws.com/rem/ninja.jpg" alt="Photo of Ninja">
    <dl>
      <dt>Name</dt>
      <dd>Lord Ninja of Catville</dd>
      <dt>Colour</dt>
      <dd>Black &amp; White</dd>
      <dt>Super power</dt>
      <dd>Most pathetic meow known to catkind</dd>
    </dl>
  </div>
  <div role="tabpanel" class="panel" id="missy">
    <img src="https://jsbin-user-assets.s3.amazonaws.com/rem/missy.jpg" alt="Photo of Missy">
    <dl>
      <dt>Name</dt>
      <dd>Missy</dd>
      <dt>Colour</dt>
      <dd>Black</dd>
      <dt>Super power</dt>
      <dd>Computer hardware protection</dd>
    </dl>
  </div>
  <small>The following content is demonstrate the effects of a tall page.</small>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi excepturi molestias modi sed harum, assumenda, cupiditate deleniti magni eaque velit quidem voluptate mollitia, consequatur sit sint quos dolorum perspiciatis omnis!</p>
  <a href="#top">top</a>
</body>
</html>
 
// adapterd from http://git.io/blingjs
var $ = document.querySelectorAll.bind(document);
​
Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn);
  return this;
};
​
NodeList.prototype.__proto__ = Array.prototype;
​
NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn) {
  this.forEach(function (el) {
    el.on(name, fn);
  });
  return this;
};
​
// end of bling.js ----
​
// a temp value to cache *what* we're about to show
var target = null;
​
// collect all the tabs
var tabs = $('.tab').on('click', function () {
  target = $(this.hash)[0];
  target.id = '';
  if (location.hash === this.hash) {
    setTimeout(update);
  }
}).map(function (el) {
  el.tabindex = 0;
  return el;
});
​
// get an array of the panel ids (from the anchor hash)
var targets = tabs.map(function (el) {
  return el.hash;
});
​
// use those ids to get a jQuery collection of panels
var panels = $(targets.join(',')).map(function (el) {
  // keep a copy of what the original el.id was
  el.dataset.old = el.id;
  return el;
});
​
function update() {
  if (target) {
    target.id = target.dataset.old;
    target = null;
  }
  
  var hash = window.location.hash;
  if (targets.indexOf(hash) !== -1) {
    return show(hash);
  }
  
  if (!hash) {
    show();
  }
}
​
function show(id) {
  // if no value was given, let's take the first panel
  if (!id) {
    id = targets[0];
  }
  // remove the selected class from the tabs,
  // and add it back to the one the user selected
  tabs.forEach(function (el) {
    var match = el.hash === id;
    el.classList[match ? 'add' : 'remove']('selected');
    el.setAttribute('aria-selected', match);
  });
​
  // now hide all the panels, then filter to
  // the one we're interested in, and show it
  panels.forEach(function (el) {
    var match = '#' + el.id === id;
    el.style.display = match ? '' : 'none';
    el.setAttribute('aria-hidden', !match);
  });
}
​
window.addEventListener('hashchange', update);
​
// initialise
if (targets.indexOf(window.location.hash) !== -1) {
  update();
} else {
  show();
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rempro
0viewers