Аккордеон раскрывает и скрывает разделы содержимого под их заголовками.
Берите его, чтобы сократить длинную страницу с независимыми разделами —
вопросы и ответы, подробности, настройки, — не теряя структуры заголовков.
Критическое сообщение и единственный следующий шаг в аккордеон не прячьте.
Пример
Стили, поведение и публичный контракт компонента.
Нажмите на заголовок, Enter или пробел.
HTML
<divclass="grid gap-2">
<articleclass="sf-accordion">
<h3class="sf-accordion-heading">
<buttonclass="sf-accordion-trigger"type="button"aria-expanded="true">
<spanclass="sf-accordion-title">Что входит в поставку?</span>
<iclass="sf-icon"aria-hidden="true">chevron_right</i>
</button>
</h3>
<divclass="sf-accordion-content"role="region">Стили, поведение и публичный контракт компонента.</div>
</article>
<articleclass="sf-accordion">
<h3class="sf-accordion-heading">
<buttonclass="sf-accordion-trigger"type="button"aria-expanded="false">
<spanclass="sf-accordion-title">Как открыть раздел?</span>
<iclass="sf-icon"aria-hidden="true">chevron_right</i>
</button>
</h3>
<divclass="sf-accordion-content hidden"role="region">Нажмите на заголовок, Enter или пробел.</div>
</article>
</div>
Разметка
Минимальную разметку показывает пример выше. Части вложены так:
article.sf-accordion → заголовок sf-accordion-heading → кнопка
sf-accordion-trigger с подписью sf-accordion-title и иконкой sf-icon,
затем панель sf-accordion-content.
Заголовок — настоящий <h2>…<h6> того уровня, который нужен структуре
страницы; CSS снимает с него отступы и начертание.
Кнопка — нативный <button type="button"> с aria-expanded. Скрипт
связывает её с панелью: ставит id, aria-controls, а панели с
role="region" — aria-labelledby.
Закрытая панель получает атрибут hidden и класс hidden; открытая — без
них. Начальное состояние задаёт разметка, дальше его ведёт скрипт.
Иконку sf-icon скрипт заполняет сам: chevron_right или, у варианта с
плюсом, add и remove.
Скрипт подключает аккордеоны при загрузке страницы и вставленные позже.
Разметку без кнопки sf-accordion-trigger он делает кликабельной целиком
и ставит ей класс sf-accordion--legacy; писать его вручную не нужно.
Варианты
Поверхность
Без модификатора аккордеон — самостоятельная карточка с заливкой.
sf-accordion--outline оставляет фон прозрачным и обводит раздел контуром —
для аккордеона на уже заданной поверхности. sf-accordion--flush убирает
фон и скругление и оставляет только разделитель снизу — для плотных списков
внутри общего контейнера.
HTML
<divclass="grid grid-col-1 md:grid-col-3 gap-3 items-start">
<divclass="flex flex-col gap-1">
<articleclass="sf-accordion">
<h3class="sf-accordion-heading">
<buttonclass="sf-accordion-trigger"type="button"aria-expanded="true">
<spanclass="sf-accordion-title">Доставка</span>
<iclass="sf-icon"aria-hidden="true">chevron_right</i>
</button>
</h3>
<divclass="sf-accordion-content"role="region">Курьером в течение двух дней.</div>
</article>
<codeclass="text-1/2 color-on-surface-variant">без модификатора</code>
</div>
<divclass="flex flex-col gap-1">
<articleclass="sf-accordion sf-accordion--outline">
<h3class="sf-accordion-heading">
<buttonclass="sf-accordion-trigger"type="button"aria-expanded="true">
<spanclass="sf-accordion-title">Доставка</span>
<iclass="sf-icon"aria-hidden="true">chevron_right</i>
</button>
</h3>
<divclass="sf-accordion-content"role="region">Курьером в течение двух дней.</div>
</article>
<codeclass="text-1/2 color-on-surface-variant">sf-accordion--outline</code>
</div>
<divclass="flex flex-col gap-1">
<articleclass="sf-accordion sf-accordion--flush">
<h3class="sf-accordion-heading">
<buttonclass="sf-accordion-trigger"type="button"aria-expanded="true">
<spanclass="sf-accordion-title">Доставка</span>
<iclass="sf-icon"aria-hidden="true">chevron_right</i>
</button>
</h3>
<divclass="sf-accordion-content"role="region">Курьером в течение двух дней.</div>
</article>
<codeclass="text-1/2 color-on-surface-variant">sf-accordion--flush</code>
</div>
</div>
Иконка
Шеврон смотрит в сторону у закрытого раздела и вниз у открытого; он
подходит меню, иерархии и последовательным шагам. sf-accordion--plus-minus
показывает плюс у закрытого раздела и минус у открытого — для вопросов и
подробностей, где смысл — показать или скрыть текст.
По умолчанию разделы открываются независимо. Контейнер
.sf-accordion-group с data-mode="single" оставляет открытым один раздел:
открытие следующего закрывает предыдущий. Аккордеоны лежат прямыми
потомками контейнера.
Открытый раздел: у кнопки aria-expanded="true", у панели нет hidden.
Скрипт ставит самому аккордеону класс active, поворачивает шеврон и
рисует разделитель между заголовком и панелью.
HTML
<divclass="grid grid-col-1 md:grid-col-2 gap-3 items-start">
<divclass="flex flex-col gap-1">
<articleclass="sf-accordion">
<h3class="sf-accordion-heading">
<buttonclass="sf-accordion-trigger"type="button"aria-expanded="false">
<spanclass="sf-accordion-title">Состав поставки</span>
<iclass="sf-icon"aria-hidden="true">chevron_right</i>
</button>
</h3>
<divclass="sf-accordion-content hidden"role="region">Стили, поведение и публичный контракт компонента.</div>
</article>
<codeclass="text-1/2 color-on-surface-variant">aria-expanded="false", hidden</code>
</div>
<divclass="flex flex-col gap-1">
<articleclass="sf-accordion">
<h3class="sf-accordion-heading">
<buttonclass="sf-accordion-trigger"type="button"aria-expanded="true">
<spanclass="sf-accordion-title">Состав поставки</span>
<iclass="sf-icon"aria-hidden="true">chevron_right</i>
</button>
</h3>
<divclass="sf-accordion-content"role="region">Стили, поведение и публичный контракт компонента.</div>
</article>
<codeclass="text-1/2 color-on-surface-variant">aria-expanded="true"</code>
</div>
</div>
Фокус
При переходе клавишей Tab кольцо фокуса охватывает заголовок изнутри и не
обрезается на стыке с панелью; панель вместе с заголовком не
подсвечивается. В примере фокус показан классом focus-visible, который CSS
читает наравне с :focus-visible.
Стили, поведение и публичный контракт компонента.
HTML
<articleclass="sf-accordion">
<h3class="sf-accordion-heading">
<buttonclass="sf-accordion-trigger focus-visible"type="button"aria-expanded="false">
<spanclass="sf-accordion-title">Состав поставки</span>
<iclass="sf-icon"aria-hidden="true">chevron_right</i>
</button>
</h3>
<divclass="sf-accordion-content hidden"role="region">Стили, поведение и публичный контракт компонента.</div>
</article>
Доступность
Кнопка внутри заголовка даёт разделу роль, имя и состояние
aria-expanded; раздел переключается по Enter и пробелу.
Подпись заголовка коротко называет содержимое раздела.
role="region" на панели ставьте, когда разделов немного: каждая такая
панель становится ориентиром страницы.
Каждый заголовок — отдельная точка Tab; стрелками разделы не
переключаются.
Шеврон зеркалится при письме справа налево. При системной настройке
уменьшения движения поворот иконки не анимируется; в режиме высокой
контрастности кольцо фокуса рисуется цветом текста.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента). Значение по умолчанию — из базового правила блока (.sf-accordion); переменную без него задают только модификаторы.
