Softonic

Генератор CSS-аккордеона

Шаг 1 / 4 Содержимое

Содержимое аккордеона

Введите заголовки и содержимое панелей как обычный текст. Строки, похожие на HTML, экранируются в готовом коде.

Создайте аккордеон из трёх разделов на семантических элементах <details> и <summary>. Измените обычный текст заголовков и панелей, цвета, отступы и способ открытия, проверьте предпросмотр, затем скопируйте код или скачайте автономный HTML-файл. Редактор работает только в этой вкладке браузера.

Как создать CSS-аккордеон

  1. 1

    Заполните три раздела

    Добавьте короткий заголовок и обычный текст панели. Строки, похожие на HTML, экранируются, а не выполняются.

  2. 2

    Настройте оформление

    Выберите четыре шестизначных цвета, скругление от 0 до 24 px и внутренний отступ от 8 до 32 px.

  3. 3

    Выберите способ открытия

    Разрешите несколько открытых панелей или используйте встроенный атрибут name для одной. Выберите стрелку либо значки плюс и минус.

  4. 4

    Проверьте и экспортируйте

    Испытайте предпросмотр указателем и клавиатурой, затем скопируйте код или скачайте HTML-файл в UTF-8.

Что создаёт генератор

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

<details class="generated-accordion" open>
  <summary>Что входит в комплект?</summary>
  <div class="generated-accordion__panel">Добавьте подробности здесь.</div>
</details>

Готовый CSS оформляет рамку, фон заголовка, текст, фокус, отступы, углы и значок. В нём есть логические свойства, например margin-inline-start, и правила для направления справа налево. Медиазапрос prefers-reduced-motion отключает переход значка, если посетитель предпочитает меньше движения.

Несколько панелей или одна

Настройка Готовая разметка Результат
Несколько Без общего name Каждый раздел открывается независимо
Одна У всех name="generated-accordion" В совместимых браузерах открытие одной панели закрывает другую

В старых браузерах без поддержки исключительных групп details аккордеон остаётся рабочим, но может держать открытыми несколько панелей.

Безопасный обычный текст

Заголовки и панели обрабатываются как текст. Символы <, >, &, кавычки и апострофы экранируются в готовом коде, поэтому вставленный тег показывается как текст. Если нужны ссылки или списки, добавьте проверенную разметку после экспорта.

Проверка доступности перед публикацией

  • Перейдите к каждому summary клавишей Tab и проверьте Enter и Пробел.
  • Проверьте контраст цвета фокуса с фоном заголовка и страницы.
  • Испытайте масштабирование, узкий экран и направление справа налево.
  • Не прячьте главную инструкцию страницы только в закрытой панели.

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

Нет. Открытие и закрытие обеспечивают встроенные <details> и <summary>. Скачанный компонент содержит только HTML и CSS.

Да. В режиме одной панели все три элемента <details> получают одинаковый атрибут name. Старые браузеры переключаются на независимые панели.

Редактор намеренно воспринимает ввод как обычный текст и экранирует HTML-символы. При необходимости добавьте проверенную разметку после экспорта.

Нет. Текст, настройки, предпросмотр, копирование и скачивание остаются в браузере. Между страницами временное состояние хранится в sessionStorage текущей вкладки и не попадает в URL.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Смешивание цветов

Смешайте два HEX-цвета в 2-20 равномерных образцов. Каждый промежуточный цвет показывается как HEX-код в верхнем регистре, включая оба края.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Инструмент доступен на других языках