Vanilla Javascript Tabbing System

data-tabs.js

function chooseTab( tabEl ) {
  const activeClasses = tabEl.getAttribute('data-tab-active-class').split(" ");
  const name = tabEl.getAttribute('data-tab');
  const tabGroup = tabEl.closest('[data-tabs]');

  tabGroup.querySelectorAll('[data-tab]').forEach(el =>
    el == tabEl ? el.classList.add(...activeClasses) : el.classList.remove(...activeClasses)
  )

  tabGroup.querySelectorAll('[data-tab-name]').forEach(el =>
    el.style.display = el.dataset.tabName !== name ? 'none' : ''
  )
}

document.querySelectorAll('[data-tab-active]').forEach((tabEl) => {
    chooseTab( tabEl )
});

document.querySelectorAll('[data-tab]').forEach((element) => {
  element.addEventListener('click', (event) => {
    event.preventDefault();
    chooseTab(element)
  });
});

tabs.html

<div data-tabs>
  <button data-tab-active data-tab="img-1" data-tab-active-class="active another-active">Show Image 1</button>
  <button data-tab="img-2" data-tab-active-class="active another-active">Show Image 2</button>
  <div data-tab-content>
      <img data-tab-name="img-1" src="http://placekitten.com/549/569" width="549" height="569" />
      <img data-tab-name="img-2" src="http://placekitten.com/550/550" width="550" height="550" />
  </div>
</div>