Wyjątkowa akordeon

Utwórz niepowtarzalny akordeon z kilkoma elementami <details> o tej samej wartości name.

Bramus

Akordeon

Powszechnym wzorcem interfejsu użytkownika w internecie jest komponent akordeonu. Jest to komponent składający się z kilku widżetów z komunikatami, które można rozwijać (lub zwijać), aby odsłonić (lub ukryć) treść.

Aby wdrożyć ten wzorzec w internecie, należy połączyć kilka elementów <details> i zwykle grupować je wizualnie, aby wskazać, że należą do siebie.

Prezentacja: akordeon z kodem HTML i CSS

Wyjątkowy akordeon

Obsługa przeglądarek

  • 120
  • 120
  • x
  • 17.2

Odmianą wzorca jest akordeon, w którym w tym samym czasie można otworzyć tylko jeden widżet z powiadomieniem.

Aby to zrobić w przeglądarce, możesz teraz dodać atrybut name do elementów <details>. Gdy używasz tego atrybutu, wiele elementów <details> o tej samej wartości name tworzy grupę semantyczną, która działa jak wyłączny akordeon. Gdy otworzysz 1 z elementów <details> z grupy, poprzedni zostanie automatycznie zamknięty.

<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>
Prezentacja: specjalny dodatek do kodu HTML i CSS.

Strona może mieć wiele akordeonów. Użycie nowej wartości name w elemencie <details> powoduje utworzenie nowej grupy logicznej.

Prezentacja: wiele wyjątkowych akordeonów dzięki HTML i CSS.

Pamiętaj, że elementy <details>, które są częścią wyłącznej akordeonu, nie muszą być elementami równorzędnymi. Mogą być rozrzucone w całym dokumencie. Grupuje je atrybut name, a nie kolejność DOM.

Wyjątkowy akordeon Polyfill

Za pomocą poniższego kodu JavaScript można polyfill zachowanie wyłącznego akordeonu. Kod korzysta ze zdarzenia toggle elementu <details>.

Po otwarciu elementu <details> z elementem name kod znajduje pozostałe otwarte elementy <details> z tą samą wartością atrybutu name i je zamyka.

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");
          }
        });
    }
  });
});

Niektóre starsze wersje przeglądarek nie uruchamiają tego zdarzenia toggle. W takich przeglądarkach kod polyfill nic nie daje. W przypadku progresywnego ulepszania jest to zachowanie akceptowalne.