Simple vanilla JS tabs for CSS only frameworks like bulma, tailwind etc

<!DOCTYPE html>
<html>
  <head>
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
  </head>
  <body>
    <section class="section">
      <div class="tabs">
         <ul class="tabs-menu">
          <li class="is-active" data-target="first-tab"><a>Tab one</a></li>
          <li data-target="second-tab"><a>Tab two</a></li>
        </ul>
      </div>
      <div class="tab-content" id="first-tab">
        <p>tab 1</p>
      </div>
      <div class="tab-content" id="second-tab">
        <p>tab 2</p>
      </div>
    </section> 
  </body>
</html>

const tabSystem = {
    init(){
        document.querySelectorAll('.tabs-menu').forEach(tabMenu => {
            Array.from(tabMenu.children).forEach((child, ind) => {
                child.addEventListener('click', () => {
                    tabSystem.toggle(child.dataset.target);
                });
                if(child.className.includes('is-active')){
                    tabSystem.toggle(child.dataset.target);
                }
            });
        });
    },
    toggle(targetId){
        document.querySelectorAll('.tab-content').forEach(contentElement=>{
            contentElement.style.display = contentElement.id === targetId ? 'block' : 'none';
            document.querySelector(`[data-target="${contentElement.id}"]`).classList[contentElement.id === targetId ? 'add' : 'remove']('is-active');
        })
    },
};
// use it
tabSystem.init()

/* Styles go here */