목차
- Collapse 클래스 종류
- Collapse 기본토글 (hide/show 순)
- Collapse 토글순서변경 (show/hide 순)
- Collapse Panel (접는 패널)
- Collapse List Group (접는 리스트 그룹)
- Accordion (아코디언 메뉴)
- Collapse 플러그인 파일
- Collapse 플러그인 클래스
- Collapse 방법1 - data-* 속성 이용
- Collapse 방법2 - JS 이용
- Collapse Option (옵션)
- Collapse Method (메서드)
- Collapse Event (이벤트)
- Collapse - 토글 버튼 아이콘・텍스트 변경 [JS 이용]
- Collapse - 토글 버튼 아이콘・텍스트 변경 [CSS 이용]
Collapse 클래스 종류
.collapse 클래스 - (접이식내용표시)
.collapse in 클래스 - (접기식 내용을 기본으로 보이게 하기)
.panel-collapse 클래스 - (토글글상자 = 접이식글상자 = 패널컬랩스)
.list-group 클래스 - (접이식 패널의 리스트 그룹)
.list-group-item 클래스 - 접이식 패널의 리스트 그룹의 각 항목
Accordion (아코디언메뉴)
Collapse 기본토글 (hide/show 순)
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#hz">홈짱닷컴 주소보기</button>
<div id="hz" class="collapse">Homzzang.com</div>
결과보기
[참고] <a> 요소 경우, href 속성으로도 목적지 표시 가능.
<a href="#hz" data-toggle="collapse">홈짱닷컴 주소?</a>
<div id="hz" class="collapse">Homzzang.com</div>
Collapse 토글순서변경 (show/hide 순)
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#hz">홈짱닷컴 주소보기</button>
<div id="hz" class="collapse in">Homzzang.com</div>
결과보기
Collapse Panel (접는 패널)
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#hz">홈짱닷컴 주소?</a>
</h4>
</div>
<div id="hz" class="panel-collapse collapse">
<div class="panel-body">Homzzang.com</div>
<div class="panel-footer">Since 2012</div>
</div>
</div>
</div>
예제보기
Collapse List Group (접는 리스트 그룹)
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#hz">코딩언어</a>
</h4>
</div>
<div id="hz" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">JS</li>
</ul>
<div class="panel-footer">홈짱닷컴 Homzzang.com</div>
</div>
</div>
</div>
Accordion (아코디언 메뉴)
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">HTML</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">뼈대</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">CSS</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">디자인</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">JS</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">동작</div>
</div>
</div>
</div>
예제보기
JS Collapse
Collapse 플러그인 파일
아래 파일 중 하나 필요.
개별: collapse.js
통합: bootstrap.js (또는, bootstrap.min.js)
Collapse 플러그인 클래스
.collapse
내용 숨기기.
.collapse in
내용 보이기
.collapsing
transition 시작되면 추가되고, 완료되면 제거.
Collapse 방법1 - data-* 속성 이용
<button class="btn" data-toggle="collapse" data-target="#demo">클릭</button>
<div id="demo" class="collapse">클릭 시, 보였다 숨겼다 할 내용</div>
Collapse 방법2 - JS 이용
$('.collapse').collapse()
Collapse Option (옵션)
parent
접을 수있는 항목이 표시되면 지정된 부모 아래의 모든 접을 수 있는 요소가 닫힘.
(전통적인 아코디언 동작과 유사-패널 클래스에 따라 다름)-아래 예 참조
가능한 옵션값 타입 종류: selector | false (기본값: false)
toggle
호출 시 접을 수 있는 요소를 토글.
가능한 옵션값 타입 종류: boolean (기본값: true)
Collapse Method (메서드)
.collapse(options)
옵션을 사용하여 접을 수있는 요소를 활성화. 유효한 값은 위의 옵션을 참조.
.collapse( "toggle")
접을 수있는 요소를 토글.
.collapse( "show")
접을 수있는 요소를 보이기.
.collapse ( "hide")
접을 수있는 요소를 숨기기.
Collapse Event (이벤트)
show.bs.collapse
접을 수있는 요소가 표시 될 때 발생.
shown.bs.collapse
CSS transition 완료 후, 접을 수있는 요소가 완전히 표시 될 때 발생.
hide.bs.collapse
접을 수있는 요소를 숨기려고 할 때 발생.
hidden.bs.collapse
CSS transition 완료 후, 접을 수있는 요소가 완전히 숨겨지면 발생.
Collapse - 토글 버튼 아이콘・텍스트 변경 [JS 이용]
...
<button type="button" class="btn btn-success" data-toggle="collapse" data-target="#hz">
<span class="glyphicon glyphicon-collapse-down"></span> 열기
</button>
<div id="hz" class="collapse">홈짱닷컴 Homzzang.com</div>
...
<script>
$(document).ready(function(){
$("#hz").on("hide.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> 열기');
});
$("#hz").on("show.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> 닫기');
});
});
</script>
결과보기
Collapse - 토글 버튼 아이콘・텍스트 변경 [CSS 이용]
<style>
/* 내용 보일 때 아이콘 */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
float: right;
margin-left: 15px;
}
/* 내용 안 보일 때 아이콘 */
.btn.collapsed:after {
content: "\e080";
}
</style>
...
<button type="button" class="btn btn-lg btn-info collapsed" data-toggle="collapse" data-target="#hz">클릭</button>
<div id="hz" class="collapse">홈짱닷컴 Homzzang.com</div>
...
결과보기
※ Button 클릭 순간 collapsed 클래스 사라지면서, 내용 보일 때 아이콘으로 바뀜. 다시 클릭하면 반대로 작동.
