Accordion
Import
<link rel="stylesheet" href="/guide/css/base/index.css" /> <link rel="stylesheet" href="/guide/css/components/accordion.css" /> <script src="/guide/js/components/accordion.js"></script>
States
Collapsed
내용이 들어갑니다.
Expanded
Multiple Items
내용이 들어갑니다.
내용이 들어갑니다.
Specs
| 요소 | Width | Padding | Border | Font (Header / Content) | Color (Expanded) |
|---|---|---|---|---|---|
| Accordion | 400px | Header 12px 16px · Content 16px | 1px solid --gray-200 | 18px / 16px · Pretendard Regular | --green-50 bg · --green-800 text |
Code
<div class="accordion">
<div class="accordion__item accordion__item--expanded">
<button class="accordion__header" aria-expanded="true">
<span class="accordion__title">Section1</span>
<span class="accordion__icon" aria-hidden="true"></span>
</button>
<div class="accordion__content">
<p class="accordion__text">내용이 들어갑니다.</p>
</div>
</div>
<div class="accordion__item">
<button class="accordion__header" aria-expanded="false">
<span class="accordion__title">Section2</span>
<span class="accordion__icon" aria-hidden="true"></span>
</button>
<div class="accordion__content">
<p class="accordion__text">내용이 들어갑니다.</p>
</div>
</div>
</div>
<script src="/guide/js/components/accordion.js"></script>
Classes
| 클래스 | 타입 | 설명 |
|---|---|---|
| .accordion | 루트 | 아코디언 컨테이너 |
| .accordion__item | 요소 | 단일 아이템 래퍼 |
| .accordion__item--expanded | 수정자 | 펼쳐진 상태. JS가 토글 |
| .accordion__header | 요소 | 클릭 가능한 헤더 <button> |
| .accordion__title | 요소 | 헤더 텍스트 |
| .accordion__icon | 요소 | 화살표 아이콘 (CSS chevron) |
| .accordion__content | 요소 | 콘텐츠 영역 (기본 display: none) |
| .accordion__text | 요소 | 콘텐츠 텍스트 |