목차
- Collapse 예제 - hide/show 순서 토글
- Collapse 예제 - show/hide 순서 토글
- 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-->
결과보기