search

matthiasott / a11y-accordion-tabs

A script for an accessible accordion tabs component
MIT License
71 stars 6 forks source link

Tabs start expanded with accordion start collapsed? #7

Open prymalsrealm opened 4 years ago

prymalsrealm commented 4 years ago

Can there be separate collapsible options for the tabs vs accordions? I would like the tabs to always start expanded and the accordion to start collapsed. I only see a global startCollapsed property. Thanks!

robmcfadden commented 4 years ago

Not the most elegant solution, but I needed this and this is what I came up with. Adjust 1023px to your needs.


if (window.matchMedia('(max-width: 1023px)').matches) {
  document.querySelectorAll('.js-accordeon-trigger[aria-expanded="true"]').forEach((el) => {
    el.click();
  });
}
matthiasott commented 4 years ago

Hi! I just released a fix that should solve this. The tabs now always start expanded regardless of the data-start-collapsed option. https://github.com/matthiasott/a11y-accordion-tabs/releases/tag/v1.0.2 Please also note that there was a (tiny) breaking change in v1.0.0: The component now uses the correct spelling of accordion… ;) Also see: https://github.com/matthiasott/a11y-accordion-tabs/commit/f44bb27e2adda00e3ed72058472a1378bdd3fc05