You don't know HTML: Exclusive Accordion
Довольно часто в интерфейсах встречаются аккордеоны. Это следующие друг за другом блоки, состоящие из интерактивного заголовка и контента. При клике по заголовку, контент раскрывается или скрывается. Важной особенностью аккордеонов является раскрытие одновременно только одного из блоков.
Члены группы OpenUI внесли предложение под названием Exclusive Accordion. Его суть в возможности объединения нескольких элементов в группу для реализации аккордеона. Браузеры уже поддержали и внедрили это предложение. Если добавить к нескольким атрибут name с одинаковым значением, то они объединяются в группу и начинают работать как аккордеон.
Доставка
Информация о доставке...
Оплата
Информация об оплате...
Возврат
Информация о возврате...
В таком варианте только один может быть раскрыт одновременно. Элемент вполне хорошо стилизуется и есть способы анимировать высоту в CSS (а скоро появится прямое решение для этого). Поэтому его можно использовать вместо сторонних плагинов и компонентов. Меньше стороннего кода — лучше производительность и проще поддержка.
Эксклюзивный аккордеон поддерживается во всех современных версиях браузеров. Если атрибут name не поддерживается, то сам по себе работает как раскрывающийся блок и всё будет работать, но можно будет раскрыть все блоки. Важно, что вёрстка от этого не сломается. Прогрессивное улучшение! Если хочется, чтобы работало и в более старых браузерах, можно добавить очень лёгкий скрипт-полифилл:
document.querySelectorAll("details[name]").forEach(($details) => {
$details.addEventListener("toggle", (e) => {
const name = $details.getAttribute("name");
if (e.newState == "open") {
document
.querySelectorAll(`details[name=${name}][open]`)
.forEach(($openDetails) => {
if (!($openDetails === $details)) {
$openDetails.removeAttribute("open");
}
});
}
});
});
#ydkhtml
Довольно часто в интерфейсах встречаются аккордеоны. Это следующие друг за другом блоки, состоящие из интерактивного заголовка и контента. При клике по заголовку, контент раскрывается или скрывается. Важной особенностью аккордеонов является раскрытие одновременно только одного из блоков.
Члены группы OpenUI внесли предложение под названием Exclusive Accordion. Его суть в возможности объединения нескольких элементов в группу для реализации аккордеона. Браузеры уже поддержали и внедрили это предложение. Если добавить к нескольким атрибут name с одинаковым значением, то они объединяются в группу и начинают работать как аккордеон.
Доставка
Информация о доставке...
Оплата
Информация об оплате...
Возврат
Информация о возврате...
В таком варианте только один может быть раскрыт одновременно. Элемент вполне хорошо стилизуется и есть способы анимировать высоту в CSS (а скоро появится прямое решение для этого). Поэтому его можно использовать вместо сторонних плагинов и компонентов. Меньше стороннего кода — лучше производительность и проще поддержка.
Эксклюзивный аккордеон поддерживается во всех современных версиях браузеров. Если атрибут name не поддерживается, то сам по себе работает как раскрывающийся блок и всё будет работать, но можно будет раскрыть все блоки. Важно, что вёрстка от этого не сломается. Прогрессивное улучшение! Если хочется, чтобы работало и в более старых браузерах, можно добавить очень лёгкий скрипт-полифилл:
document.querySelectorAll("details[name]").forEach(($details) => {
$details.addEventListener("toggle", (e) => {
const name = $details.getAttribute("name");
if (e.newState == "open") {
document
.querySelectorAll(`details[name=${name}][open]`)
.forEach(($openDetails) => {
if (!($openDetails === $details)) {
$openDetails.removeAttribute("open");
}
});
}
});
});
#ydkhtml