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