아코디언 전용 아코디언

name가 동일한 여러 <details> 요소로 배타적 섹션을 만듭니다.

Bramus

아코디언

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

웹에서 이 패턴을 구현하려면 몇 개의 <details> 요소를 결합하고 일반적으로 시각적으로 그룹화하여 함께 속함을 나타냅니다.

독점 아코디언

펼치기 패턴의 변형은 배타적 펼치기로, 공개 위젯 중 하나만 동시에 열 수 있습니다.

웹에서 전용 아코디언을 만들려면 <details> 요소에 name 속성을 추가합니다. 이 속성을 사용하면 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 속성입니다.

독점 아코디언을 폴리필합니다.

다음 JavaScript를 사용하면 배타적 섹션의 동작을 폴리필할 수 있습니다. 이 코드는 <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 이벤트를 실행하지 않습니다. 이러한 브라우저에서는 폴리필 코드가 아무것도 하지 않습니다. 점진적 개선 측면에서 이는 허용되는 동작입니다.