[Bootstrap] Collapse

1. 기본 Collapsible 사용법

• Collapse는 많은 내용을 깔끔하게 숨기거나 보여주는 데 유용

<button data-bs-toggle="collapse" data-bs-target="#demo">접기/펼치기</button>

<div id="demo" class="collapse">
  숨겨진 내용입니다.
</div>

• `.collapse`: 접힘 대상 콘텐츠를 포함하는 div
• `data-bs-toggle="collapse"`: 버튼/링크 클릭 시 기능 활성화
• `data-bs-target="#id"` 또는 `href="#id"`: 연결할 콘텐츠 지정

✅ 기본 상태에서 보이게 하려면?

→ `.collapse`에 .`show` 클래스 추가

<div id="demo" class="collapse show">기본으로 보이는 콘텐츠</div>

---

2. 링크로도 토글 가능

<a href="#demo" data-bs-toggle="collapse">펼치기 링크</a>

<div id="demo" class="collapse">내용입니다.</div>

 

---

3. 아코디언 (Accordion)

• 아코디언은 하나의 항목만 펼쳐지고 나머지는 접히는 구조

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">항목 1</a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">내용 1</div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <a class="btn collapsed" data-bs-toggle="collapse" href="#collapseTwo">항목 2</a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">내용 2</div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <a class="btn collapsed" data-bs-toggle="collapse" href="#collapseThree">항목 3</a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">내용 3</div>
    </div>
  </div>
</div>

• `data-bs-parent="#accordion"`: 하나가 열릴 때 나머지를 자동으로 닫음
• `.collapsed`: 닫힌 상태의 버튼 표시