Атрибут class тега <details>
Описание
Атрибут class позволяет назначать один или несколько CSS-классов элементу <details> для стилизации и управления его внешним видом и поведением через CSS и JavaScript.
<details class="faq-item">
<summary>Часто задаваемый вопрос</summary>
<p>Ответ на часто задаваемый вопрос.</p>
</details>
<style>
.faq-item {
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
}
.faq-item[open] {
background-color: #f8f9fa;
}
.faq-item summary {
font-weight: bold;
cursor: pointer;
}
</style>
Основные варианты применения:
| Тип класса | Пример | Назначение |
|---|---|---|
| Стилевые классы | accordion-item |
Визуальное оформление элемента |
| Состояния | is-open, is-disabled |
Отслеживание состояния элемента |
| Функциональные | js-accordion |
Для JavaScript-селекторов |
Продвинутое использование:
<details class="accordion-item js-accordion">
<summary class="accordion-header">Раздел 1</summary>
<div class="accordion-content">
<p>Содержимое первого раздела.</p>
</div>
</details>
<style>
.accordion-item {
margin-bottom: 5px;
overflow: hidden;
transition: all 0.3s ease;
}
.accordion-header {
background: #f5f5f5;
padding: 10px 15px;
display: block;
}
.accordion-content {
padding: 0 15px;
max-height: 0;
transition: max-height 0.3s ease;
}
.accordion-item[open] .accordion-content {
max-height: 1000px;
padding: 15px;
}
</style>
<script>
// Добавляем обработчик для всех аккордеонов
document.querySelectorAll('.js-accordion').forEach(details => {
details.addEventListener('toggle', function() {
this.classList.toggle('is-open', this.open);
});
});
</script>
Рекомендации по именованию классов:
- Используйте осмысленные имена (
faq-sectionвместоbox1) - Придерживайтесь единого стиля (BEM, kebab-case и др.)
- Разделяйте стилевые и JS-классы (префикс
js-) - Избегайте избыточных имен (
detailsдля<details>)
Пример с модификаторами состояния:
<details class="info-box info-box--highlight">
<summary>Важное уведомление</summary>
<p>Это специальное уведомление требует вашего внимания.</p>
</details>
<style>
.info-box {
border-left: 4px solid #ddd;
padding: 10px;
margin: 10px 0;
}
.info-box--highlight {
border-left-color: #4CAF50;
background-color: #f8fff8;
}
</style>
Советы по использованию:
- Используйте классы для создания тематических групп элементов
- Комбинируйте с атрибутом
openдля стилизации состояний - Для сложных аккордеонов используйте вложенные классы
- Тестируйте отзывчивость на разных устройствах
Примечание: Хотя классы предоставляют гибкость в стилизации элементов <details>, не переусердствуйте с оформлением - сохраняйте стандартное поведение и доступность компонента. Для сложных интерактивных элементов рассмотрите использование специализированных библиотек.