<!-- 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"));