Tabview

Demo

Tab 1 content
Tab 2 content
Tab 3 content

Usage

<!-- Set the nav href and id on the content to match -->
<div class="c-tab-view" role="tablist" data-tabview>
	<ul class="tab-nav">
		<li class="m-active" role="presentation"><a href="#tab1">Tab 1</a></li>
		<li role="presentation"><a href="#tab2">Tab 2</a></li>
		<li role="presentation"><a href="#tab3">Tab 3</a></li>
	</ul>
	<div class="tab-content m-active" id="tab1-content" role="tabpanel">
		Tab 1 content
	</div>
	<div class="tab-content" id="tab2-content" role="tabpanel">
		Tab 2 content
	</div>
	<div class="tab-content" id="tab3-content" role="tabpanel">
		Tab 3 content
	</div>
</div>
// Initialize for all elements in the DOM
TabView.setup();

// Initialize for elements in a NodeList or Array
TabView.setup(document.querySelectorAll(".elements"));

// Initialize for one element
new TabView(document.querySelector("#element"));