0Pricing
HTML Academy · Урок

Создание аккордеона PE

Создайте аккордеон, работающий без JavaScript, а затем улучшите его

«Создание аккордеона PE» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Цель: работающий аккордеон без JS

Версия PE аккордеона использует только HTML — пару встроенных элементов <details>/<summary>. Нажмите на заголовок, чтобы открыть или скрыть панель. Работает без CSS, без JS и без фреймворка: всё встроено в HTML.

<details>
  <summary>What is HTML?</summary>
  <p>HTML is the markup language of the web.</p>
</details>

Встроенная доступность

<summary> — это доступная для фокусировки кнопка, которую можно активировать с клавиатуры (клавиши Enter и пробела переключают её состояние). Программы чтения с экрана объявляют, раскрыт или свёрнут элемент. Два элемента HTML обеспечивают то, для чего пользовательскому аккордеону на React потребовались бы десятки строк ARIA и обработки событий.

Стилизация с помощью CSS

Оформите треугольник раскрытия, внутренние отступы панели и переходы с помощью обычного CSS. Атрибут open отражает состояние, поэтому details[open] summary { color: blue; } применяется только в раскрытом состоянии. JS для визуальной доработки не нужен.

details { border-bottom: 1px solid #ccc; padding: 8px 0; }
summary { font-weight: bold; cursor: pointer; }
details[open] summary { color: var(--accent); }

Анимация открытия и закрытия

По умолчанию открытие и закрытие происходят мгновенно. Добавьте анимацию, плавно изменяя видимость содержимого или используя JS, который измеряет высоту панели и анимирует её максимальную высоту. В простых случаях резкое переключение допустимо; анимация — это улучшение на основе CSS+JS, применяемое поэтапно.

Расширение возможностей с помощью JavaScript

JS может добавить необязательные улучшения: закрывать другие аккордеоны при открытии одного из них (режим открытия только одного элемента), сохранять открытое состояние в localStorage, анимировать переход или отслеживать в аналитике, какие записи раскрываются. Каждое улучшение лишь дополняет базовый вариант.

document.querySelectorAll("details").forEach((d) => {
  d.addEventListener("toggle", () => {
    if (d.open) {
      document.querySelectorAll("details").forEach((o) => {
        if (o !== d) o.removeAttribute("open");
      });
    }
  });
});

Событие переключения

<details> вызывает событие toggle при каждом изменении открытого состояния. Используйте его, чтобы реагировать на раскрытие пользователем, не перенастраивая обработчики нажатий. Работает и при щелчках мышью, и при активации с клавиатуры.

Рендеринг состояния на сервере

Чтобы отобразить аккордеон изначально открытым, установите атрибут open на стороне сервера: <details open>. Состояние содержится в HTML и доступно поисковым роботам и пользователям с медленным соединением ещё до выполнения JS.

Когда встроенных возможностей недостаточно

Если дизайн требует пользовательского значка раскрытия и сворачивания, анимированного показа или панели с несколькими столбцами, создайте собственную реализацию, но по возможности используйте <details>/<summary> в качестве базовой структуры. Добавляйте ARIA только в том случае, если вообще нельзя использовать встроенные элементы.

Проверка без JS

Отключите JavaScript в DevTools и проверьте, что аккордеон по-прежнему работает: нажмите на summary, панель переключается, порядок фокусировки остаётся логичным, активация с клавиатуры работает. Если что-то ломается, JS — не улучшение, а требование, что нарушает PE.

Только CSS: открыт только один элемент

Чтобы без JS реализовать радиоподобное поведение «одновременно открыт только один элемент», используйте атрибут name у <details> (поддерживается в Chrome/Safari): все <details name="faq"> используют общее состояние, поэтому открытие одного элемента закрывает остальные. Это шаблон только на HTML, повторяющий поведение переключателей.

Переход с аккордеона только на JS

Замените div-элементы и JS на <details>/<summary>, сохранив CSS-классы для оформления. В результате HTML станет короче, исчезнет зависимость от JS, улучшится доступность, а содержимое можно будет индексировать. Большинство аккордеонов на JS можно перевести на PE с минимальными видимыми для пользователя изменениями.

Проверка знаний

Какая пара элементов HTML предоставляет полностью работающий аккордеон без JavaScript?

Итоги

Аккордеон на основе PE использует встроенные <details>/<summary> как базовый вариант — он полностью доступен и управляется с клавиатуры без JS. Для визуального оформления добавьте CSS, а при необходимости JS — для анимации или поведения «открыт только один элемент». Отключите JS и убедитесь, что базовый вариант по-прежнему работает. Новый атрибут name даже позволяет реализовать режим «открыт только один элемент» только с помощью CSS.

Часто задаваемые вопросы

Урок «Создание аккордеона PE» бесплатный?

Да — полный текст урока «Создание аккордеона PE» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Создание аккордеона PE»?

Создайте аккордеон, работающий без JavaScript, а затем улучшите его Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Создание аккордеона PE»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Философия PE: начинайте с HTML
  2. Обнаружение возможностей и определение браузера
  3. Плавная деградация и прогрессивное улучшение
  4. Создание аккордеона PE
← Назад к HTML Academy