Аккордеон на чистом HTML или теги <details> & <summary>
Тег <details> — это интерактивный элемент, при нажатии на который открывается блок с информацией. A <summary> — это заголовок этого блока, он необязателен, без него будет написан текст «Подробнее», «Details» или нечто подобное — в зависимости от выбранного языка и браузера
По умолчанию cодержимое скрыто, но если мы хотим, чтобы оно показывалось сразу при загрузке страницы, нужно добавить к нему атрибут open
Мы можем изменить иконку треугольника на что-то другое, используя псевдоэлемент ::marker
👉 @FrontendPortal | #HTML
Тег <details> — это интерактивный элемент, при нажатии на который открывается блок с информацией. A <summary> — это заголовок этого блока, он необязателен, без него будет написан текст «Подробнее», «Details» или нечто подобное — в зависимости от выбранного языка и браузера
По умолчанию cодержимое скрыто, но если мы хотим, чтобы оно показывалось сразу при загрузке страницы, нужно добавить к нему атрибут open
Мы можем изменить иконку треугольника на что-то другое, используя псевдоэлемент ::marker
summary::marker {
content: "👉";
}
details[open] summary::marker {
content: "👇";
}👉 @FrontendPortal | #HTML