Skip to content

Instantly share code, notes, and snippets.

@stowball

stowball/tabs.css

Last active December 20, 2016 22:46
Show Gist options
  • Save stowball/4983698 to your computer and use it in GitHub Desktop.
Save stowball/4983698 to your computer and use it in GitHub Desktop.
Download ZIP
ARIA accessible, simple jQuery tabs which cater for nested levels
Raw
tabs.css
/* Add .js on <html> by default or with Modernizr, CssUserAgent or similar */
.js .pane {
display: none;
}
.js .pane:first-child {
display: block;
}
.tabs a.current {}
Raw
tabs.html
<ul class="tabs">
<li><a href="#tab-id-1">Tab name 1</a></li>
<li><a href="#tab-id-2">Tab name 2</a></li>
<li><a href="#tab-id-3">Tab name 3</a></li>
</ul>
<div class="panes">
<div class="pane" id="tab-id-1">Tab content 1</div>
<div class="pane" id="tab-id-2">Tab content 2</div>
<div class="pane" id="tab-id-3">Tab content 3</div>
</div>
Raw
tabs.js
var tabs = {
init: function() {
var $tabs = $('.tabs'),
aria = 'aria-hidden',
current = 'current';
$tabs.each(function() {
var $this = $(this),
$links = $this.find('> li a'),
$panes = $this.nextAll('.panes:first').find('> .pane');
$links.filter(':first').addClass(current);
$panes.filter(':not(:first)').attr(aria, true);
$links.on('click', function(e) {
e.preventDefault();
var $this = $(this),
idx = $this.parent().index();
if (!$this.hasClass(current)) {
$links.removeClass(current);
$this.addClass(current);
}
$panes.hide().attr(aria, true);
$panes.filter(':eq(' + idx + ')').show().attr(aria, false);
});
});
}
};
tabs.init();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment