이 페이지는 Cloud Translation API를 통해 번역되었습니다.

아코디언 전용 아코디언

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

Bramus

아코디언

웹의 일반적인 UI 패턴은 아코디언 구성요소입니다. 이는 콘텐츠를 표시하거나 숨길 수 있도록 개별적으로 확장(또는 축소)할 수 있는 여러 공개 위젯으로 구성된 구성요소입니다.

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

</ph>

데모: HTML 및 CSS를 사용한 아코디언

전용 아코디언

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

아코디언 패턴의 변형은 배타적 아코디언으로, 공개 위젯 중 하나만 동시에 열 수 있습니다.

웹에서 이 작업을 실행하려면 이제 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>

</ph> <ph type="x-smartling-placeholder">

데모: HTML 및 CSS 전용 아코디언

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

</ph>

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