name가 동일한 여러 <details> 요소로 배타적 아코디언을 만듭니다.
아코디언
웹의 일반적인 UI 패턴은 아코디언 구성요소입니다. 이는 콘텐츠를 표시하거나 숨길 수 있도록 개별적으로 확장(또는 축소)할 수 있는 여러 공개 위젯으로 구성된 구성요소입니다.
웹에서 이 패턴을 구현하려면 <details> 요소를 결합하고 일반적으로 시각적으로 그룹화하여 서로 속해 있음을 나타냅니다.
전용 아코디언
브라우저 지원
- 120
- 120
- x
- 17.2
아코디언 패턴의 변형은 배타적 아코디언으로, 공개 위젯 중 하나만 동시에 열 수 있습니다.
웹에서 이 작업을 실행하려면 이제 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 속성입니다.
전용 아코디언을 폴리필
다음 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 이벤트를 실행하지 않습니다. 이러한 브라우저에서는 폴리필 코드가 아무 작업도 하지 않습니다. 이는 점진적 개선 측면에서 허용 가능한 동작입니다.