PicoCSS Content Tabs

HTML

<div class="container">
    <nav role="tab-control">
      <ul>
        <li><label for="tab1">Tab 1</label></li>
        <li><label for="tab2">Tab 2</label></li>
      </ul>
    </nav>
    <div role="tabs">
      <section>

        <input hidden="hidden" type="radio" name="tabs" id="tab1" checked="checked" />
        <figure>
          <blockquote>
            "When you're new to something, you bring an ignorance that can
            be highly innovative."
            <footer>
              <cite>– Rick Rubin</cite>
            </footer>
          </blockquote>
        </figure>

        <input hidden="hidden" type="radio" name="tabs" id="tab2" />
        <figure>
          <blockquote>
            "Nothing beats a simple worldview. When we know who is the bad
            guy, the day has structure."
            <footer>
              <cite>– Volker Pispers</cite>
            </footer>
          </blockquote>
        </figure>

      </section>
    </div>
  </div>

CSS

[role="tabs"] {
  display: flex;
}

[role="tabs"] section {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

[role="tabs"] figure {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  display: none;
}

[role="tabs"] [type="radio"]:checked + figure {
  display: block;
}

nav[role="tab-control"] label.active {
  color: var(--primary);
  cursor: pointer;
}

JS (optional)

This optional javascript is used to set an active state class to a tab once it’s clicked. But it is not required for the tabs to work.

const nodeList = document.querySelectorAll('nav[role="tab-control"] label');
const eventListenerCallback = setActiveState.bind(null, nodeList);

nodeList[0].classList.add('active'); /** add active class to first node  */

nodeList.forEach((node) => {
  node.addEventListener("click", eventListenerCallback); /** add click event listener to all nodes */
});

/** the click handler */
function setActiveState(nodeList, event) {
  nodeList.forEach((node) => {
    node.classList.remove("active"); /** remove active class from all nodes */
  });
  event.target.classList.add("active"); /* set active class on current node */
}