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

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

Collapse 예제 - hide/show 순서 토글 

 

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

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

 

결과보기

Collapse 예제 - show/hide 순서 토글

 

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

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

 

결과보기

Collapse 예제 - 아코디언 메뉴

 

<div class="container">

    <div id="accordion">

      <div class="card">

          <div class="card-header">

              <a class="card-link" data-toggle="collapse" href="#hz1">

              홈짱닷컴 주소?

              </a>

          </div>

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

              <div class="card-body">

              Homzzang.com

              </div>

          </div>

      </div>

 

      <div class="card">

          <div class="card-header">

              <a class="collapsed card-link" data-toggle="collapse" href="#hz2">

              홈짱닷컴 소개

              </a>

          </div>

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

              <div class="card-body">

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

              </div>

          </div>

      </div>

 

       <div class="card">

          <div class="card-header">

              <a class="collapsed card-link" data-toggle="collapse" href="#hz3">

              홈짱닷컴 강의언어

              </a>

          </div>

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

              <div class="card-body">

              HTML CSS JS JQ BS PHP SQL

              </div>

          </div>

      </div>  

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

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

 

결과보기