WordPress Component Library
10up Engineering

Tabs

The Tabs component is based on and extended from work done by the folks over at Simply Accessible. It is a stripped down, but still accessible version of UI tabs. They are keyboard accessible and user friendly and are meant to be a starting point for you to use on a project.

HTML

<div class="tabs">
	<div class="tab-control">
		<ul class="tab-list">
			<li class="tab-item"><a href="#js-tab1">View Tab 1</a></li>
			<li class="tab-item"><a href="#js-tab2">View Tab 2</a></li>
			<li class="tab-item"><a href="#js-tab3">View Tab 3</a></li>
			<li class="tab-item"><a href="#js-tab4">View Tab 4</a></li>
			<li class="tab-item"><a href="#js-tab5">View Tab 5</a></li>
		</ul>
	</div><!-- //.tab-control -->

	<div class="tab-group">

		<div class="tab-content" id="js-tab1">
			<h2>Tab 1 Content</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div><!-- //.tab-content -->

		<div class="tab-content" id="js-tab2">
			<h2>Tab 2 Content</h2>
			<p>In tincidunt tempor risus gravida tincidunt.</p>
		</div><!-- //.tab-content -->

		<div class="tab-content" id="js-tab3">
			<h2>Tab 3 Content</h2>
			<p>Suspendisse eget commodo erat. Donec a metus fringilla, pharetra ipsum nec, aliquet felis. </p>
		</div><!-- //.tab-content -->

		<div class="tab-content" id="js-tab4">
			<h2>Tab 4 Content</h2>
			<p>Aenean eu nibh nisl. Nulla ornare condimentum erat, et rhoncus urna euismod a.</p>
		</div><!-- //.tab-content -->

		<div class="tab-content" id="js-tab5">
			<h2>Tab 5 Content</h2>
			<p>Duis sollicitudin consequat lorem eu sagittis.</p>
		</div><!-- //.tab-content -->

	</div><!-- //.tab-group -->

</div><!-- //.tabs -->

SCSS Download SCSS

// Breakpoints
$bp-small:          40.625em !default;      // 650px
$bp-medium:         53.125em !default;      // 850px
$bp-large:          62.5em !default;        // 1000px

// Variables
$color-gray: #777 !default;
$color-gray-light: #ccc !default;
$color-white: #fff !default;

// Component Sass
.tab-list {
	list-style: none;
	margin: 0;
	overflow: auto;
	padding: 0;
	position: relative;
	white-space: nowrap;
} // .tab-list

.tab-item {
	display: inline-block;

	> a {
		border: 1px solid $color-gray;
		display: inline-block;
		padding: 5px 8px;
		text-decoration: none;

		@media ( min-width: $bp-small ) {
			padding: 10px 15px;
		}

		&:hover,
		&:focus {
			background: $color-gray-light;
		}
	}

	&.is-active {
		a {
			background: $color-white;
			position: relative;
			z-index: 1;
			border-bottom-color: $color-white;
		}
	}

} // .tab-item

.tab-group {
	border: 1px solid $color-gray;
	margin-top: -1px;
} // .tab-group

.tab-content {
	padding: 15px;

	&[aria-hidden="true"] {
		left: -999em;
		position: absolute;
		top: -999em;
	}

	&.is-active {
		position: static;
	}
} // .tab-content

JS Usage | Plugin

TenUp.tabs({
	'target': '.tabs', // ID (or class) of the tab container
}, function() {
	console.log('Amazing callback function!');
});

JavaScript API

TenUp.tabs( { options }, callback );

This is the main method to call the plugin. It currently takes two arguments, an options object and callback function.

options

Currently recognizes the following: target. To request more options, please file an issue.

target : '.tabs'

The target option should contain the ID or class of the tabs wrapper.

callback

Accepts a function that will be executed upon completion.

Browser Compatibility

Feature Chrome Firefox Internet Explorer Safari
Basic Support Latest Latest 10+ 5.1+

Resources