아코디언 전용 아코디언

name가 동일한 여러 <details> 요소로 전용 아코디언을 만듭니다.

아코디언

웹에서 일반적인 UI 패턴은 아코디언 구성요소입니다. 이는 개별적으로 펼치거나 접어 콘텐츠를 표시하거나 숨길 수 있는 여러 공개 위젯으로 구성된 구성요소입니다.

웹에서 이 패턴을 구현하려면 몇 가지 <details> 요소를 결합하고 일반적으로 시각적으로 그룹화하여 서로 연결되어 있음을 나타냅니다.

스페셜 에디션으로만 만나볼 수 있는

아코디언 패턴의 변형은 공개 위젯 중 하나만 동시에 열 수 있는 독점 아코디언입니다.

웹에서 이 작업을 실행하려면 이제 name 속성을 <details> 요소에 추가하면 됩니다. 이 속성을 사용하면 name 값이 동일한 여러 <details> 요소가 시맨틱 그룹을 형성하고 전용 아코디언 역할을 합니다. 그룹에서 <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>

한 페이지에 여러 개의 독점 아코디언이 있을 수 있습니다. <details> 요소에 새 name 값을 사용할 때마다 새로운 논리 그룹이 생성됩니다.

독점 아코디언의 일부인 <details> 요소는 반드시 동위 요소일 필요는 없습니다. 문서 전체에 분산될 수 있습니다. DOM 순서가 아니라 name 속성을 그룹화합니다.

전용 아코디언 폴리필

다음 자바스크립트를 사용하면 독점 아코디언의 동작을 폴리필할 수 있습니다. 코드는 <details> 요소의 toggle 이벤트를 사용합니다.

name가 있는 <details> 요소가 열리면 코드는 name 속성에 동일한 값을 가진 열려 있는 다른 <details> 요소를 찾아서 닫습니다.

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 이벤트를 실행하지 않습니다. 이러한 브라우저에서 폴리필 코드는 아무 작업도 하지 않습니다. 점진적 개선의 관점에서는 허용되는 동작입니다.