아코디언 Accordion
제목을 누르면 아래 내용이 펼쳐지고 다시 누르면 접히는 목록
다른 이름: 접이식 메뉴, 펼침 목록, Collapse, Expander, FAQ 목록
HTML 코드
<div class="acc">
<details open><summary>무료로 쓸 수 있나요?</summary><p>네, 기본 기능은 무료입니다.</p></details>
<details><summary>환불 규정은?</summary><p>결제 후 7일 이내 전액 환불됩니다.</p></details>
<details><summary>팀으로 쓸 수 있나요?</summary><p>팀 플랜에서 지원합니다.</p></details>
</div>
<style>
.acc{border:1px solid var(--border);border-radius:12px;overflow:hidden}
details+details{border-top:1px solid var(--border)}
summary{padding:12px 14px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;font-weight:600}
summary::-webkit-details-marker{display:none}
summary::after{content:"›";transform:rotate(90deg);transition:.2s;color:var(--muted)}
details[open] summary::after{transform:rotate(-90deg)}
details p{margin:0;padding:0 14px 12px;color:var(--muted)}
</style>AI에게 이렇게 요청하세요
FAQ 질문을 누르면 답이 부드럽게 펼쳐지고 오른쪽 화살표가 회전하며 한 번에 하나만 열리는 아코디언으로 만들어줘
<div class="acc">
<details open><summary>무료로 쓸 수 있나요?</summary><p>네, 기본 기능은 무료입니다.</p></details>
<details><summary>환불 규정은?</summary><p>결제 후 7일 이내 전액 환불됩니다.</p></details>
<details><summary>팀으로 쓸 수 있나요?</summary><p>팀 플랜에서 지원합니다.</p></details>
</div>
<style>
.acc{border:1px solid var(--border);border-radius:12px;overflow:hidden}
details+details{border-top:1px solid var(--border)}
summary{padding:12px 14px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;font-weight:600}
summary::-webkit-details-marker{display:none}
summary::after{content:"›";transform:rotate(90deg);transition:.2s;color:var(--muted)}
details[open] summary::after{transform:rotate(-90deg)}
details p{margin:0;padding:0 14px 12px;color:var(--muted)}
</style>언제 쓰나
FAQ, 설정 그룹, 긴 상세 정보처럼 전부 펼치면 너무 긴 내용을 접어둘 때.
비슷한 것과 차이
- 탭: 가로로 나열하고 하나만 보여줌. 아코디언은 세로로 쌓고 여러 개를 펼칠 수도 있음
- 한 번에 하나만 열리게 할지 꼭 명시