Softonic

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

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

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

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

Текст и настройки аккордеона остаются в этой вкладке браузера. Они не отправляются через Livewire, не помещаются в URL и не загружаются на сервер. При закрытии вкладки сохранённое состояние шагов удаляется.

Создайте аккордеон из трёх разделов на семантических элементах <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.

Конвертер BBCode в HTML

Преобразуйте BBCode (разметку форумов) в чистый HTML. Поддерживает теги форматирования, списки, цитаты, код, изображения, ссылки и таблицы.

Генератор случайных цветовых палитр

Создавайте случайные палитры из 2–15 цветов, выбирайте яркий, пастельный, приглушенный или темный стиль и копируйте HEX-коды или CSS-переменные.

Выбор цвета HEX

Выберите или введите HEX-цвет и получите RGB, HSL, примерный CMYK, относительную яркость и контраст с белым и чёрным.

Конвертер двоичного кода в ASCII

Вставьте двоичный код (байты через пробел или длинный поток битов) и получите текст ASCII, который он представляет. Поддерживает 7-битные и 8-битные кодировки.

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.