Tab module on es6 / es2015 without jQuery and other dependencies

Foreword

Some time ago I began to gradually abandon jQuery in favor of native javascript. This is due to the fact that the support of old browsers has ceased to be a priority and the page loading speed came out on top. I could not find a minimal tabs module with simple html markup - so I decided to write my own.

Demo , Github source code

HTML markup

<div class="tabs"> <div class="tabs__toggle tabs__toggle_active"> 1</div> <div class="tabs__toggle"> 2</div> <div class="tabs__tab">    </div> <div class="tabs__tab">    </div> </div> 

If you need to place several groups of tabs on one page, you just need to separate them into different '.tabs' blocks. The location of the indoor units affects only the order of their output. The default tab should add the class 'tabs__toggle_active'.

Bookmark class

 class Tab { constructor (tabs, toggle, tab) { this.tabs = tabs; this.toggle = toggle; this.tab = tab; this.init(); } init () { if (this.toggle.classList.contains('tabs__toggle_active')) { this.open(); } else { this.close(); } this.toggle.addEventListener('click', () => { this.open(); }); } open () { if (this.tabs.active === this) { // already open return; } if (this.tabs.active) { this.tabs.active.close(); } this.tabs.active = this; this.tab.style.display = 'block'; this.toggle.classList.add('tabs__toggle_active'); } close () { this.tab.style.display = 'none'; this.toggle.classList.remove('tabs__toggle_active'); } } 

The constructor accepts the parent class of the tab group, the DOM element of the button on which the tab opens, and the DOM tabs to which this button belongs.
')
The init function checks whether this tab is open by default and adds a click-to-open event.

The open function closes an open tab when it is present and sets a link to its own instance of the class in the 'active' property of the parent class. It also inserts the active class for the styling of the button and the tab 'display' property.

The close function removes the active class from the button and hides the tab.

Tab group class

 export class Tabs { constructor (container) { this.container = container; this.init(); } init () { this.toggles = this.container.querySelectorAll('.tabs__toggle'); this.tabs = this.container.querySelectorAll('.tabs__tab'); if (!this.isEverythingOk()) { return; } for (let index = 0; index < this.toggles.length; index++) { new Tab (this, this.toggles[index], this.tabs[index]); } } isEverythingOk () { if (this.toggles.length !== this.tabs.length) { console.warn('Tabs toggles and tabs amounts are not matching'); return false; } else if (this.toggles.length === 0) { console.warn('There\'s no toggles for tabs'); return false; } else if (this.tabs.length === 0) { console.warn('There\'s no content tabs'); return false; } return true; } } 

The constructor accepts a DOM tab group object (in our case, .tabs).

The init function loops through all buttons and creates instances of the Tab class, grouping along the principle “first button to first tab”.

The isEverythingOk function checks whether the number of tabs corresponds to the number of buttons and their presence; otherwise, throws a warning into the console for easier searching for errors.

Initialization function

 export default function initTabs(selector) { for (let container of document.querySelectorAll(selector)) { new Tabs(container); } } 

The function is intended for those who do not want to understand the principles of working with DOM or just for convenience. Creates instances of the Tabs class.

An example using the initialization function

 import initTabs from 'future-tabs'; initTabs('.tabs'); 

An example of working directly with the class

 import {Tabs} from 'future-tabs'; const container = document.querySelector('.tabs'); const tabs = new Tabs(container); 

There are plans to sample internal blocks depending on the selector, adding the names of the elements following the _bem methodology.

Github

Thanks for attention!

PS Made the block name option by _bem. Details in the githaba documentation.