Табы и аккордеон

Аккордеон — список заголовков, каждый раскрывается вниз. Табы — ряд вкладок, из которых видна одна. Задача общая: показать сразу столько, сколько человек может охватить взглядом. Но делаются они по-разному, и аккордеон — редкий случай, когда писать вообще ничего не нужно.

Что из двух брать

Аккордеон: два тега и ничего больше

Теги <details> и <summary> дают раскрывающийся блок сами. Браузер берёт на себя щелчок, Enter и Пробел, состояние для программ чтения экрана и треугольник-указатель.

<details class="accordion__item">
  <summary class="accordion__head">Сколько стоит сделать сайт самому</summary>
  <div class="accordion__body">
    <p>Домен — около 200 рублей в год, хостинг — от 150 рублей в месяц.</p>
  </div>
</details>

<!-- открыт при загрузке страницы -->
<details class="accordion__item" open> … </details>

Скрипт нужен ровно в одном случае: если требуется, чтобы открытым оставался только один раздел. Тогда при открытии одного <details> у остальных снимается атрибут open — это четыре строки.

Табы: три связи между кнопкой и панелью

У табов готового тега нет, и почти вся работа — не в переключении, а в атрибутах. Кнопка вкладки и её панель связываются тремя нитями, и каждая нужна программе чтения экрана.

<div class="tabs">
  <div class="tabs__list" role="tablist" aria-label="Способы установки">
    <button class="tabs__tab" type="button" role="tab"
            id="tab-win" aria-controls="panel-win" aria-selected="true">
      Windows
    </button>
    <button class="tabs__tab" type="button" role="tab"
            id="tab-mac" aria-controls="panel-mac" aria-selected="false" tabindex="-1">
      macOS
    </button>
  </div>

  <div class="tabs__panel" role="tabpanel" id="panel-win" aria-labelledby="tab-win">…</div>
  <div class="tabs__panel" role="tabpanel" id="panel-mac" aria-labelledby="tab-mac" hidden>…</div>
</div>

Странный на вид tabindex="-1" у неактивных вкладок — это не ошибка, а правило. В ряду вкладок Tab не ходит: он попадает на активную вкладку и следующим нажатием уходит дальше по странице, а между вкладками переключаются стрелками. Так устроены табы во всех операционных системах.

function select(tab) {
  tabs.forEach((t) => {
    const on = t === tab;
    t.setAttribute('aria-selected', String(on));
    t.tabIndex = on ? 0 : -1;                       // в обходе только активная
    document.getElementById(t.getAttribute('aria-controls')).hidden = !on;
  });
  tab.focus();
}

list.addEventListener('keydown', (event) => {
  const i = tabs.indexOf(document.activeElement);
  if (event.key === 'ArrowRight') select(tabs[(i + 1) % tabs.length]);
  if (event.key === 'ArrowLeft') select(tabs[(i - 1 + tabs.length) % tabs.length]);
});

Что попросить у нейросети

В Evolution CMS: содержимое вкладок из чанков

Разметка табов в шаблоне остаётся как есть — меняется только то, что внутри панелей. Если вкладки одни и те же на всём сайте, каждая панель становится чанком, и редактор правит текст, не видя ни атрибутов, ни скриптов.

<div class="tabs__panel" role="tabpanel" id="panel-win" aria-labelledby="tab-win">
  {{ustanovkaWindows}}
</div>

Для блока «Вопросы и ответы» удобнее другое: вопросы — ресурсы в отдельной папке, а DocLister собирает из них аккордеон по чанку. Тогда новый вопрос добавляется созданием страницы, а не правкой шаблона. Заодно к такому блоку легко добавить микроразметку FAQPage, и вопросы попадут прямо в поисковую выдачу.

Частые ошибки