Accotabs

Open First Accordion Tab

To open the first accordion tab, add this code after the plugin code:

<!-- Plugin Accotabs - Open First Accordion Tab -->
<script src="https://cdn.jsdelivr.net/gh/ryanmorr/ready@1/dist/ready.min.js"></script>
<script>ready('.c-tabs__wrapper.is-accordion .c-tabs__accordion-tab:first-child', function(tab) {
  setTimeout(function() { tab.click() });
});</script>
<!-- end Plugin Accotabs - Open First Accordion Tab -->

Open Tab From URL

To open a tab from URL hash, add this code after the plugin code:

<!-- Accotabs - Open Tab From URL -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@14/dist/smooth-scroll.polyfills.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ryanmorr/ready@1/dist/ready.min.js"></script>
<script>
function accotabsOpenTabByURL(scrollToTab) {
  // By default, a page will be scrolled to a tab
  scrollToTab = scrollToTab || true;
  if (!document.location.hash.match(/^#tabpanel/)) return null;
  ready(document.location.hash, function(target) {
    var tab = document.querySelector('a[href="' + document.location.hash + '"]');
    if (tab) setTimeout(() => tab.click(), 10);
    if (scrollToTab) setTimeout(scroll_, 500);
    function scroll_() {
      var scroll = new SmoothScroll();
      scroll.animateScroll(target, null, {
        updateURL: false,
        offset: tab.offsetHeight + 20,
        // Uncomment for a fixed header
        // header: window.innerWidth >= 641 ? '.Header' : '.Mobile'
      });
    }
  });
}
document.addEventListener('DOMContentLoaded', accotabsOpenTabByURL);
window.addEventListener('mercury:load', accotabsOpenTabByURL);
</script>
<!-- end Accotabs - Open Tab From URL -->

Make Tabs Vertical

To make tabs vertical, add this style after the plugin code.

<style>
.c-tabs__wrapper:not(.is-accordion) .c-tabs {
  display: flex;
  flex-wrap: wrap;
}
.c-tabs__tablist.flickity-enabled {
  width: 100%;
}
.c-tabs__tablist:not(.flickity-enabled) {
  flex-direction: column;
  max-width: 150px;
}
.c-tabs__tablist:not(.flickity-enabled) li {
  margin: 0;
}
.c-tabs__tablist:not(.flickity-enabled)::after {
  display: none;
}
.c-tabs__tablist:not(.flickity-enabled) + .c-tabs__content {
  width: calc(100% - 150px);
}
</style>
accotabsDmitry Kiselyov