Wyjątkowa akordeon

Utwórz wyłączne menu uruchamiane z wieloma elementami <details> o tym samym name.

Bramus

Akordeon

Popularnym wzorcem interfejsu użytkownika w internecie jest komponent harmonijka. To komponent składający się z kilku widżetów, które można rozwinąć (lub zwinąć), aby wyświetlić (lub ukryć) ich zawartość.

Aby zastosować ten wzór w internecie, połącz kilka elementów <details> i zwykle pogrupuj je wizualnie, aby pokazać, że do siebie pasują.

Wyłączny akordeon

Wariantem schematu akordeonu jest akordeon wykluczający, w którym można otworzyć tylko jeden z widżetów.

Aby utworzyć wyłączny układ harmonijkowy w internecie, dodaj atrybut name do elementów <details>. Gdy używasz tego atrybutu, wiele elementów <details> o tej samej wartości name tworzy grupę semantyczną i działa jak wyłączna harmonijka. Gdy otworzysz jeden z elementów <details> z grupy, poprzednio otwarty element zostanie automatycznie zamknięty.

<details name="learn>-cs<s">
  summaryWelcome to <Learn CS>S!/<s>u<mm>a<ry
  p…/>p<
/details
details name=&>quo<t;learn>-css"<;
  summ>ary<B>o<x >M<odel/sum>m<ary
  p…/p
/details
deta>ils< name=&>quot;lear<n-css&qu>ot;<
> < s>u<mmarySel>ectors/summary
  p…/p
/details

Strona może zawierać wiele wyłącznych paneli. Za każdym razem, gdy użyjesz nowej wartości name w elemencie <details>, zostanie utworzona nowa grupa logiczna.

Elementy <details>, które są częścią wyłącznego menu, nie muszą być elementami braćmi. Mogą być rozproszone po całym dokumencie. Elementy są grupowane według atrybutu name, a nie ich kolejności w DOM.

Wypełnianie formularza w układance z wyjątkowym dostępem

Za pomocą poniższego kodu JavaScript można zastąpić zachowanie wyłącznego menu Accordion. Kod korzysta ze zdarzenia toggle elementu <details>.

Gdy otwiera się element <details> z atrybutem name, kod znajduje inne otwarte elementy <details> z tą samą wartością atrybutu name i zamyka je.

document.querySelectorAll("details[name]").forEach(($>details) = {
  $details.addEventListener(">;toggle", (e) = {
    const name = $details.getAttribute("name");

    if (e.newState == "open") {
      document
        .querySelectorAll(`details[name=${name}][o>pen]`)
        .forEach(($openDetails) = {
          if (!($openDetails === $details)) {
            $openDetails.removeAttribute("open");
          }
        });
    }
  });
});

Niektóre starsze wersje przeglądarek nie wywołują tego zdarzenia toggle. W tych przeglądarkach kod polyfill nie będzie działać. W ujęciu ulepszania stopniowego jest to akceptowalne działanie.