body {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  max-width: 30rem;
  margin: 1.5rem auto;
}

summary {
  font-weight: 600;
  color: rgb(255, 255, 255);
  background-color: rgb(7, 185, 255);
  padding: 1.2rem;
  margin-bottom: 1.2rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

Вывод:

Создаём кастомный FAQ на CSS (без JavaScript)

Если нужна точная кастомизация внешнего вида, и вы хотите контролировать псевдоэлементы, иконки, анимации — делаем аккордеон с использованием скрытых input (checkbox или radio). Есть два популярных подхода:

• Метод на чекбоксах — позволяет открывать несколько секций одновременно;
• Метод на радиокнопках — только одна секция открыта одновременно.

Метод с чекбоксами

Логика: у каждой секции есть скрытый input type=”checkbox”. По состоянию :checked с помощью селекторов соседства меняется стиль label и показывается контент.

HTML (пример):

  


  
Custom CSS Only Accordion (FAQ)
  
Using Checkbox method
  

    

      
      How to build a custom accordion using CSS only?
      

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipit assumenda a, nesciunt eum nobis eaque, exercitationem distinctio alias ullam quia. Corrupti beatae necessitatibus nihil.
      
    
    

      
      How to change the height of pseudo-elements?
      

        Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatibus ducimus excepturi doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero incidunt reprehenderit facere ex hic ipsa odit in! Eveniet.
      
    
  

Общий базовый CSS:

body {
  color: #502c2c;
  background: #f1edec;
  padding: 1.2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  max-width: 45rem;
  margin: 0 auto;
  font-size: 1.2rem;
}

Скрываем настоящие чекбоксы и радиокнопки (технически input остаётся доступным для клавиатуры и скринридеров):

/* Скрытие input (checkbox / radio) */
input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

Стили для собственно аккордеона (кратко):

/* Стиль аккордеона */
.faq {
  color: #ffe3e3;
  margin-bottom: 3rem;
}

.faq-label {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  background: #b61818;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

.faq-label::after {
  content: '\002B'; /* плюс */
  padding: 0.51rem;
  transform: scale(1.8);
  text-align: center;
  transition: all 0.35s;
}

.faq-content {
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: white;
  transition: all 0.35s;
  display: none;
}

/* Показ содержимого при checked */
input:checked + .faq-label {
  background: #8f1414;
}
input:checked + .faq-label::after {
  content: '\2013'; /* тире вместо плюса */
  transform: scale(1.5);
}
input:checked ~ .faq-content {
  max-height: 100vh;
  padding: 1em;
  display: block;
  transition: all 0.35s;
}

Вывод:

-using-Checkbox-Mehtod.jpg?q=50&fit=crop&w=825&dpr=1.5)

Метод с радиокнопками

Логика: похож на чекбоксы, но input type=”radio” с одинаковым name обеспечивает, что открыта только одна секция одновременно. Для возможности полного закрытия добавляют «пустую» радиокнопку‑переключатель “Close all”.

HTML (пример):

  


  
Custom CSS Only Accordion (FAQ)
  
Using the Radio Button method
  

    

      
      How to create accordion using the Radio Button method?
      

        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maiores quisquam atque dicta eum numquam necessitatibus, nisi non adipisci temporibus corrupti libero hic aspernatur quibusdam dolores perferendis, officiis odio repellendus.
      
    
    

      
      How to create a custom accordion using CSS only?
      

        Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur possimus reiciendis vitae ducimus labore quidem velit vel temporibus! Illo sunt placeat officiis, tiure magnam.
      
    
    

      
      What does accordion style mean?
      

        Laudantium quibusdam laboriosam hic omnis quas ullam commodi rem. Architecto ut laborum eaque cum porro doloremque hic cupiditate tempora temporibus ducimus dolores magnam quidem, facilis sapiente officiis voluptas?
      
    
    

      
      Close all ×
    
  

CSS для «Close all» (пример):

.faq-label {
  position: relative;
}

.faq-close {
  display: inline-block;
  padding: 1rem;
  font-size: 1rem;
  background: #b61818;
  cursor: pointer;
  position: absolute;
  left: 64rem;
}

Вывод:

-using-the-Radio-Method.jpg?q=50&fit=crop&w=825&dpr=1.5)

Советы по анимации и улучшениям

• Для плавного разворачивания используйте max-height вместе с transition или CSS-анимации keyframes для более сложных эффектов;
• Для иконок используйте CSS-псевдоэлементы ::before/::after, SVG или webfont‑иконки;
• Учтите, что display: none нельзя анимировать — вместо него переключайте max-height/opacity/transform;
• Сохраняйте доступность: метки label, фокусируемые элементы и логичная последовательность DOM.

Важно: у радиокнопок всегда одна выбранная опция; чтобы иметь возможность полностью закрыть аккордеон, нужен управляющий «Close all»‑input.

Когда CSS-only аккордеон не подходит

• Требуются сложные асинхронные операции при открытии секции (загрузка данных, lazy‑fetch) — лучше JS;
• Нужна тонкая синхронизация состояния с URL/history (то есть deep linking) — удобнее реализовать на JS;
• Требуются сложные интерактивные сценарии (перетаскивание, динамическое добавление секций) — JS более гибок.

Альтернативные подходы

• Использовать
  /

  для простых случаев и лучшей доступности;
• Аккордеон на JS — полный контроль состояния и анимаций, динамика и интеграция с API;
• Библиотеки UI (например, компонентные библиотеки) — экономят время при сложных интерфейсах.

Мини‑методология: как выбрать подход

1. Оцените требования: нужен ли доступ для скринридеров и работа без JS?
2. Если «да» — используйте
   или CSS‑only;
3. Нужна динамика/асинхронность — выбирайте JS;
4. Для UX: чекбоксы — несколько открытых, радио — одна открытая.

flowchart TD
  A[Есть ли требование 'работать без JS?'] -->|Да| B[Использовать 
 или CSS-only]
  A -->|Нет| C[Требуется динамика?]
  C -->|Да| D[Использовать JS-аккордеон]
  C -->|Нет| B
  B --> E{Несколько открытых?}
  E -->|Да| F[Чекбоксы]
  E -->|Нет| G[Радио]

Чеклист перед публикацией

• Проверить фокусировку клавиатурой (Tab/Shift+Tab);
• Убедиться, что label правильно связан с input (for / id);
• Проверить внешний вид в мобильных размерах;
• Добавить тесты на поведение (открыть/закрыть, анимация);
• Проверить работу без JavaScript (если это требование).

Критерии приёмки

• Все секции корректно открываются/закрываются клавиатурой;
• Контент не перекрывается при анимации (нет дерганья страницы);
• Экранные читалки читают заголовки секций и контент;
• Для радиоварианта можно закрыть все через управляющий input (если требуется).

Короткая шпаргалка (cheat sheet)

• Плюс/минус в заголовке: content: ‘\002B’ и ‘\2013’;
• Скрытие input: position:absolute; opacity:0; z-index:-1; — оставляет доступность;
• Анимация разворачивания: transition: max-height 0.35s ease, padding 0.35s;
• Не анимируйте display; вместо него используйте opacity/transform/max-height.

Однострочный глоссарий

• Аккордеон — UI‑компонент с секциями, которые можно разворачивать/сворачивать;
• :checked — CSS‑состояние для input, используемое для управления стилями;
• /

  — нативный HTML для простых раскрывающихся блоков.

Заключение

Кратко: если нужен простой, доступный и надёжный аккордеон — начните с