TabsJS

Tabs on vanilla JS.

by shakibdshy

HTML

<button class="tab tab-1">Вкладка 1</button>
<button class="tab tab-2">Вкладка 2</button>
<button class="tab tab-3 active-tab">Вкладка 3</button>
<button class="tab tab-4">Вкладка 4</button>
<button class="tab tab-5">Вкладка 5</button>

<section class="content tab-1">Содержимое 1</section>
<section class="content tab-2">Содержимое 2</section>
<section class="content tab-3">Содержимое 3</section>
<section class="content tab-4">Содержимое 4</section>
<section class="content tab-5">Содержимое 5</section>

<button class="tab tab-sd">Вкладка 1</button>
<button class="tab tab-sa">Вкладка 2</button>

<section class="content tab-sd">Содержимое 1</section>
<section class="content tab-sa">Содержимое 2</section>

CSS

.js-default-hide {
	position: absolute;
	visibility: hidden;
}

.show-tab {
    visibility: visible;
}

.active-tab {
    border: none;
}

JavaScript

function showTab(event) {
  document.querySelector('.show-tab').classList.remove('show-tab');
  document.querySelector('.active-tab').classList.remove('active-tab');

  let button = event.target;
  button.classList.add('active-tab');
  let buttonClass = event.target.classList[1];
  let content = document.querySelectorAll('.' + buttonClass)[1];
  content.classList.add('show-tab');
}

function defaultHide() {
	let a = document.querySelectorAll('.content');
	a.forEach(
		function addClass(info) {
			info.classList.add('js-default-hide');
		}
	)
}

var tabButton = document.getElementsByClassName('tab');

for (var i = 0; i < tabButton.length; i++) {
  tabButton[i].addEventListener('click', showTab);
}

window.addEventListener('load', defaultHide);