Эксклюзивный аккордеон

Создайте эксклюзивный аккордеон с несколькими элементами <details> с одинаковыми name .

Bramus

Аккордеон

Распространенным шаблоном пользовательского интерфейса в Интернете является компонент «аккордеон». Это компонент, состоящий из нескольких виджетов раскрытия, которые по отдельности можно развернуть (или свернуть), чтобы показать (или скрыть) их содержимое.

Чтобы реализовать этот шаблон в Интернете, вы объединяете несколько элементов <details> и обычно группируете их визуально, чтобы указать, что они принадлежат друг другу.

Демо: Аккордеон с HTML и CSS.

Эксклюзивный аккордеон

Browser Support

• 120
• 120
• 130
• 17.2

Разновидностью шаблона аккордеона является эксклюзивный аккордеон , в котором одновременно можно открыть только один из виджетов раскрытия.

Чтобы создать эксклюзивный аккордеон в Интернете, вы добавляете атрибут name к элементам <details> . При использовании этого атрибута несколько элементов <details> с одинаковым значением name образуют семантическую группу и будут вести себя как эксклюзивный аккордеон. Когда вы открываете один из элементов <details> из группы, ранее открытый автоматически закроется.

<details name="learn-css">
  <summary>Welcome to Learn CSS!</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Box Model</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Selectors</summary>
  <p>…</p>
</details>

Демо: Эксклюзивный аккордеон с HTML и CSS.

На странице может быть несколько эксклюзивных аккордеонов. Всякий раз, когда вы используете новое значение name в элементе <details> , создается новая логическая группа.

Демо: несколько эксклюзивных аккордеонов с HTML и CSS.

Элементы <details> , являющиеся частью эксклюзивного аккордеона, не обязательно должны быть родственными. Их можно разбросать по документу. Их группирует атрибут name , а не порядок DOM.

Внимание: прежде чем использовать эксклюзивные аккордеоны, подумайте, будет ли это полезно или вредно для пользователей. Хотя использование эксклюзивного аккордеона уменьшает объем визуального пространства, занимаемого контентом, пользователям, возможно, придется открывать множество элементов, чтобы найти информацию. Это может расстроить пользователей, которые хотят просматривать несколько элементов одновременно.

Polyfill эксклюзивный аккордеон

С помощью следующего JavaScript можно полифиллить поведение эксклюзивного аккордеона. Код основан на событии toggle элемента <details> .

Когда открывается элемент <details> с name , код находит другие открытые элементы <details> с тем же значением атрибута 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");
          }
        });
    }
  });
});

Некоторые старые версии браузеров не вызывают это событие toggle . В этих браузерах код полифила ничего не сделает. С точки зрения прогрессивного улучшения это приемлемое поведение.