아코디언 전용 아코디언

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

Bramus

아코디언

웹에서 일반적인 UI 패턴은 섹션 구성요소입니다. 이 구성요소는 개별적으로 펼치거나 접을 수 있는 여러 공개 위젯으로 구성되어 있으며, 이를 통해 콘텐츠를 표시하거나 숨길 수 있습니다.

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

데모: HTML 및 CSS로 만든 악보

전용 아코디언

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 130.
  • Safari: 17.2.

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

웹에서 전용 아코디언을 만들려면 <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>
데모: HTML 및 CSS로 만든 전용 악셀레이션

페이지에 배타적인 섹션이 여러 개 있을 수 있습니다. <details> 요소에 새 name 값을 사용할 때마다 새 로직 그룹이 생성됩니다.

데모: HTML 및 CSS를 사용한 여러 개의 전용 악보

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