Bulma Tab JS Example

BulmaTabTemplate.html

<section class="section">
  <div class="container">
    <div class="tabs" data-content-target="mainTabs">
      <ul>
        <li class="is-active" data-content="aboutContent"><a>About</a></li>
        <li data-content="courseRequirementContent"><a>Course Requirements</a></li>
        <li data-content="howToApplyContent"><a>How to Apply</a></li>
        <li data-content="contactContent"><a>Contact</a></li>
      </ul>
    </div>
  </div>
  <section class="section tab-content-container" id="mainTabs">
    <div class="tab-content" id="aboutContent">
      <div class="container">
        <h1 class="title">About</h1>
        <h2 class="subtitle">
          A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
        </h2>
      </div>
    </div>
    <div class="tab-content" id="courseRequirementContent">
      <div class="container">
        <h1 class="title">Course Requirements</h1>
        <h2 class="subtitle">
          A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
        </h2>
      </div>
    </div>
    <div class="tab-content" id="howToApplyContent">
      <div class="container">
        <h1 class="title">How To Apply</h1>
        <h2 class="subtitle">
          A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
        </h2>
      </div>
    </div>
    <div class="tab-content" id="contactContent">
      <div class="container">
        <h1 class="title">Contact</h1>
        <h2 class="subtitle">
          A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
        </h2>
      </div>
    </div>
  </section>
</section>

TabTemplate.js

const $PageTabCollections = Array.from(document.querySelectorAll('.tabs'))

if ($PageTabCollections.length > 0) {
  const getActiveTabFromTabs = tabCollection => () => Array.from(tabCollection).find(tab => tab.classList.contains('is-active'))
  const getActiveTabContentFromList = tabContentCollection => () => Array.from(tabContentCollection).find(content => content.classList.contains('is-active'))
  $PageTabCollections.forEach(tabCollection => {
    const hasUlTabs = tabCollection.children[0].nodeName === 'UL'
    const tabContent = document.getElementById(tabCollection.dataset.contentTarget)
    if (hasUlTabs) {
      const tabs = Array.from(tabCollection.children[0].children)
      const getActiveTab = getActiveTabFromTabs(tabs)
      const getActiveContent = getActiveTabContentFromList(tabContent.children)
      tabs.forEach(tabElm => {
        tabElm.addEventListener('click', () => {
          const activeTab = getActiveTab()
          const activeContent = getActiveContent()
          if (activeContent) {
            activeContent.classList.toggle('is-active')
          }
          if (activeTab) {
            activeTab.classList.toggle('is-active')
          }
          const contentElm = document.getElementById(tabElm.dataset.content)
          if (contentElm) {
            contentElm.classList.toggle('is-active')
          } else {
            console.error('Tab Content not found.')
          }
          tabElm.classList.toggle('is-active')
        })
      })
      const activeTab = getActiveTab()
      const activeContent = document.getElementById(activeTab.dataset.content)
      if (activeContent) {
        if (activeContent.classList.contains('is-active') === false) {
          activeContent.classList.toggle('is-active')
        }
      }
    } else {
      console.error('Error: Tabs found that do not follow Bulma spec')
    }
  })
}