• Q&A
  • 회원가입
  • 로그인

[basic] BS3 - Collapse (BS접기 = BS컬랩스 = BS토글=BS접는패널) + BS아코디언

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 클래스 사라지면서, 내용 보일 때 아이콘으로 바뀜. 다시 클릭하면 반대로 작동.


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012