아코디언

과거에는 아코디언 구성 요소를 빌드할 때 일반적으로 부트스트랩의 아코디언 구현에 도달했습니다. 내가 작업하는 대부분의 프로젝트는 부트스트랩을 사용하므로 항상 확실한 선택처럼 보였습니다. 그래도 좀 복잡합니다.

<p>
  <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Click me please!
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div>
    Ooh, you clicked!
  </div>
</div>

작동하려면 많은 속성이 필요하며, 이를 잊어버리거나 id 및 href 가 일치하지 않기 쉽습니다. 당신 바로 앞에 있지만 어떤 이유로 든 당신이 보는 데 절대적으로 오랜 시간이 걸리는 문제 유형입니다.

세부 요소

이제 <detail> 요소 덕분에 아코디언이 작동하도록 수많은 속성과 id/href를 사용하지 않아도 됩니다!



얼마나 오래되었는지는 모르겠지만 동료가 방금 보여줬는데 정말 신기합니다. 이렇게 작동합니다.

<details>
    <summary>Accordion title</summary>
    Content you want to show/hide.
</details>

<detail> 요소가 중첩되어 있는 <summary> 요소와 표시하거나 숨기려는 콘텐츠로 시작합니다. <summary> 요소 안에 있는 것은 아코디언 제목으로 표시되며 제목을 클릭하면 다른 항목이 표시되거나 숨겨집니다. 당신은 아마도 약간의 스타일링을 원할 것입니다. 그러나 열기/닫기는 모두 당신을 위해 처리됩니다.

이벤트

이 요소의 또 다른 멋진 기능은 요소가 열리거나 닫힐 때마다 toggle 이벤트를 지원한다는 것입니다. 멋진 애니메이션을 보여주고 싶습니까? 세상은 당신의 굴이다!

예시

나는 매우 기본적인 예here를 모았습니다.

지원하다

Detail 요소는 현재 약 95%의 브라우저를 지원하며 IE11만이 이를 지원하지 않는 유일한 주요 브라우저입니다. 지원 수준에 대한 자세한 내용은 here에서 확인할 수 있습니다.

추가 자료

MDN에서 Detail 요소에 대해 자세히 읽을 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details