JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<div class="publication-tabs">
  <div class="publication-tabs__list" role="tablist">
    <button class="publication-tabs__tab" role="tab" id="tab-2024" aria-selected="true" aria-controls="panel-2024">2024</button>
    <button class="publication-tabs__tab" role="tab" id="tab-2023" aria-selected="false" aria-controls="panel-2023">2023</button>
  </div>

  <div class="publication-tabs__panels">
    <div class="publication-tabs__panel" role="tabpanel" id="panel-2024" aria-labelledby="tab-2024" aria-hidden="false">
      <ul class="publication-tabs__items">
        <li class="publication-tabs__item">
          <a class="publication-tabs__link" href="abc.ac.uk" aria-label="Article: A Princess of Science? Becoming the first Woman Professor in Mathematics in Modern Europe (opens in new tab)" target="_blank">
            A Princess of Science? Becoming the first Woman Professor in Mathematics in Modern Europe
          </a>
          <p class="publication-tabs__publication">Nordic Journal of Educational History In press.</p>
        </li>
        <!-- Add more list items as needed -->
      </ul>
    </div>
    <div class="publication-tabs__panel" role="tabpanel" id="panel-2023" aria-labelledby="tab-2023" aria-hidden="true">
      <ul class="publication-tabs__items">
        <li class="publication-tabs__item">
          <a class="publication-tabs__link" href="abc.ac.uk" aria-label="Book chapter: Decolonizing feminist theories and mapping surging feminist knowledges (opens in new tab)" target="_blank">
            Decolonizing feminist theories and mapping surging feminist knowledges
          </a>
          <p class="publication-tabs__publication">In Feminist Studies, 2023</p>
        </li>
        <!-- Add more list items as needed -->
      </ul>
    </div>
  </div>
</div>

JavaScript

document.addEventListener('DOMContentLoaded', function () {
  const tabs = document.querySelectorAll('.publication-tabs__tab');
  const panels = document.querySelectorAll('.publication-tabs__panel');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      tabs.forEach(t => {
        t.setAttribute('aria-selected', 'false');
        t.classList.remove('publication-tabs__tab--active');
      });

      tab.setAttribute('aria-selected', 'true');
      tab.classList.add('publication-tabs__tab--active');

      panels.forEach(panel => {
        panel.setAttribute('aria-hidden', 'true');
      });

      const targetPanel = document.getElementById(tab.getAttribute('aria-controls'));
      targetPanel.setAttribute('aria-hidden', 'false');
    });
  });
});