Create a tabbed UI element
- Update
_toggleClassesto allow for accordion layout. - Add responsive setting that allows tabbed UI to break down into accordion at smaller screen sizes
npm install --save github:pixelunion/bc-tabs
All options are optional.
The jQuery object of the tab nav container. defaults to $('[data-tabs]').
The jQuery object of the tab link. defaults to $('[data-tab-title]').
The jQuery object of the tab content. defaults to $('[data-tab-content]').
Override for the tab toggle function.
Override for keepTabsOpen function. Needs to return boolean
Class given to both the nav element and content container for the currently active tab.
E.G. #search-content-listing
Callback function called once the tabs have been initialized. Gets passed the id of the currently active tab.
Callback function called when a tab is clicked. Gets passed the id of the clicked tab.
Leverage the history API for tab chages. Defaults to false.
<ul class="tabs" data-tabs>
<li class="tab-title"><a href="#featured-products">Featured Products</a></li>
<li class="tab-title"><a href="#best-sellers">Best Sellers</a></li>
</ul>
<div class="tabs-content">
<div class="tabs-content-panel" id="featured-products">
Tab panel content
</div>
<div class="tabs-content-panel" id="best-sellers">
Tab panel content
</div>
</div>
<section data-tabs>
<h2 class="tab-title"><a href="#hello">tab</a></h2>
<div class="tabs-content-panel" id="hello">
content with an anchor
<a href="http://google.com">google</a>
</div>
<h2 class="tab-title"><a href="#goodbye">tab2</a></h2>
<div class="tabs-content-panel" id="goodbye">
other content
</div>
</section>
// Constructor:
this.tabs = new Tabs({
afterSetup: (tabId) => {
alert(`The tabs are ready! the current tab is ${tabId}`);
},
afterChange: () => {
alert(`A tab has been changed! the new tab is ${tabId}`);
}
});
// _bind:
this.tabs.displayTabContent('#leave-review');
// Style the tab themselves.
.tab-title {
font-weight: normal;
&.active {
font-weight: bold;
}
}
.tab-content-panel {
display: none;
&.active {
display: block;
}
}
For debugging or improvements you can run a standalone test version of the module using a very basic webpack development server:
$ npm install
$ npm run demo
This will allow you to make changes to the JS and HTML while working with a live demo in your browser.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent