2.2.2 • Published 6 years ago
@morsedigital/vanilla-tabbed-content v2.2.2
vanilla-tabbed-content
Synopsis
A tabbed content module written in vanilla JavaScript.
Installation
npm install @morsedigital/vanilla-tabbed-content
Running tests
npm run test
Example Instantiation
import TabbedContentClass from '@morsedigital/vanilla-tabbed-content';
const tabbedContentElements = document.querySelectorAll('.tabbed-content');
if (tabbedContentElements.length > 0){
Array.from(tabbedContentElements).map((element)=>{
return new TabbedContentClass({
element: element
});
});
}
Configuration
A new instance of TabbedContentClass can contain the following in its configuration object:
new TabbedContentClass({
element: // The DOM node to be instantiated as having tabbed content
, bodyContainerClass: // String. Class for the tabbed content's body. Default is "tabbed-content-body"
, navContainerClass: // String. Class for the tabbed content's navigation. Default is "tabbed-content-nav"
, tabContainerClass: // String. Class for each tab. Default is "tabbed-content-tab"
});
Example HTML structure
<div class="tabbed-content">
<ul class="tabbed-content-nav" role="tablist">
<li role="presentation">
<a href="#" role="tab">Tab 1</a>
</li>
<li role="presentation">
<a href="#" role="tab">Tab 2</a>
</li>
</ul>
<div class="tabbed-content-body">
<article class="tabbed-content-tab">
<h1>Tab 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</article>
<article class="tabbed-content-tab">
<h1>Tab 2</h1>
<p>Doloribus quisquam, voluptatum dolores amet incidunt dicta.</p>
</article>
</div>
</div>
All tabbed content must be wrapped in a single parent div with a class of tabbed-content. The navigation is always wrapped in a div with a class of tabbed-content-nav, and the body in a div with a class of tabbed-content-body. The tabs themselves are individually wrapped in a div with a class of tabbed-content-tab.
The relationship between navigation items and tabs is always based on their index, ie navigation item 0 will control tab 0, etc.
CSS
As a bare minimum, you'll require the following, or similar CSS:
.tabbed-content-tab {
display: none;
&.active {
display: block;
}
}