[basic] BS5 - Collapse (BS접기 = BS컬랩스 = BS토글)

1. Collapse 예제 - hide/show 순서 토글
2. Collapse 예제 - show/hide 순서 토글
3. Collapse 예제 - 아코디언 메뉴

Collapse 예제 - hide/show 순서 토글 

[<BUTTON> 태그 경우]

 

<button type="button" class="btn btn-info" data-bs-toggle="collapse" data-bs-target="#demo">홈짱닷컴 주소보기</button>

<div id="demo" class="collapse">Homzzang.com</div>

 

---

[<A> 태그 경우]

data-bs-target="#demo"' 속성 대신 href="#demo' 속성 이용 가능.

 

<a href="#demo" data-bs-toggle="collapse">홈짱닷컴 주소보기</a>

<div id="demo" class="collapse">Homzzang.com</div>

cf. BS4 경우, data-toggle="collapse" data-target="#demo" 속성 사용.

Collapse 예제 - show/hide 순서 토글

※ Collapse는 기본적으로 (hide/show)순인데, 접히는 콘텐츠 부분에 show 속성 추가 시 (show/hide)순으로 변경 가능.

 

<button type="button" class="btn btn-info" data-bs-toggle="collapse" data-bs-target="#demo">홈짱닷컴 주소보기</button>

<div id="demo" class="collapse show">Homzzang.com</div>

Collapse 예제 - 아코디언 메뉴

 

<div class="container mt-3">

    <div id="accordion">

      <div class="card">

          <div class="card-header">

              <a class="btn" data-bs-toggle="collapse" href="#hz1">

              홈짱닷컴 주소?

              </a>

          </div>

          <div id="hz1" class="collapse show" data-bs-parent="#accordion">

              <div class="card-body">Homzzang.com</div>

          </div>

      </div>

 

      <div class="card">

          <div class="card-header">

              <a class="collapsed btn" data-bs-toggle="collapse" href="#hz2">

                  홈짱닷컴 소개

              </a>

          </div>

          <div id="hz2" class="collapse" data-bs-parent="#accordion">

              <div class="card-body">

                  홈페이지제작관리 + 서버관리

              </div>

          </div>

      </div>

 

       <div class="card">

          <div class="card-header">

              <a class="collapsed btn" data-bs-toggle="collapse" href="#hz3">

                  홈짱닷컴 강의언어

              </a>

          </div>

          <div id="hz3" class="collapse" data-bs-parent="#accordion">

              <div class="card-body">

                  HTML CSS JS JQ BS PHP SQL

              </div>

          </div>

      </div>  

    </div><!--accordion-->

</div><!--container-->