아코디언

내용이 길어 접어둬야 할 때. 대부분 열어봐야 하는 내용이면 접지 마세요.

코드

<details class="jt-accordion" open>
  <summary class="jt-accordion-head">Step 2. 위생 및 건강상태 자가점검</summary>
  <div class="jt-accordion-body">최근 발열·기침 여부를 확인합니다.</div>
</details>

하지 말 것

• 중요한 정보를 접어두지 마세요. 접힌 것은 대부분 안 읽힙니다.
• 아코디언 안에 아코디언을 넣지 마세요.

접근성

• <details> 기반이라 JS 없이 동작하고 키보드·스크린리더가 자동으로 지원됩니다
• 브라우저 페이지 내 검색(Ctrl+F)이 접힌 내용도 찾아냅니다

앱에서 모양 바꾸기

이 컴포넌트는 별도 노브가 없습니다. 크기·색이 다르게 필요하면 도움말로 요청하세요 — 토큰에 먼저 추가한 뒤 씁니다.

관련