• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

목차
  1. Collapse 클래스 종류
  2. Collapse 기본토글 (hide/show 순)
  3. Collapse 토글순서변경 (show/hide 순)
  4. Collapse Panel (접는 패널)
  5. Collapse List Group (접는 리스트 그룹)
  6. Accordion (아코디언 메뉴)
  7. Collapse 플러그인 파일
  8. Collapse 플러그인 클래스
  9. Collapse 방법1 - data-* 속성 이용
  10. Collapse 방법2 - JS 이용
  11. Collapse Option (옵션)
  12. Collapse Method (메서드)
  13. Collapse Event (이벤트)
  14. Collapse - 토글 버튼 아이콘・텍스트 변경 [JS 이용]
  15. 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 클래스 사라지면서, 내용 보일 때 아이콘으로 바뀜. 다시 클릭하면 반대로 작동.


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS3 - HOME (소개) - BS3 vs BS4 차이 (= BS차이)
basic BS3 - Start (시작) ★ - BS다운 / BSCDN / BS구문
basic BS3 - Grid (그리드) ★★★ - (BS3그리드 vs BS4그리드)
basic BS3 - Text/Typography(BS글자 = BS텍스트) (= BS4글자 vs BS3글자) BS글자색
basic BS3 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS3 - Image (BS이미지) - 반응형이미지 + 반응형동영상 + 이미지정렬
basic BS3 - Jumbotron/page-header (BS점보트론 / BS페이지헤더) - 큰글씨, 글자키우기
basic BS3 - Well (BS웰 = BS회색상자) ★ - BS회색배경상자 (= BS회색박스 = BS웰클래스)
basic BS3 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS3 - Button (BS버튼) ★ - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS3 - Button Group (BS버튼그룹) ★
basic BS3 - Icon (아이콘) - Glyphicon/Font Awesome/Google Material De…
basic BS3 - Progress Bar (BS진행바 = BS진행상태표시 = BS진도바 = BS프로그레스바) - I…
basic BS3 - Pagination (BS페이징 = BS페이지번호 = BS페이징 = BS패지네이션) + Bread…
basic BS3 - Pager (BS페이저) - 이전페이지/다음페이지 (= 앞으로가기/뒤로가기)
basic BS3 - List Group (BS리스트그룹) - 리스트생성
basic BS3 - Panel (BS글상자 = BS패널)
basic BS3 - Dropdown (BS드롭다운메뉴) ★ + Dropup (BS드롭업메뉴)
basic BS3 - Collapse (BS접기 = BS컬랩스 = BS토글=BS접는패널) + BS아코디언
basic BS3 - Tabs/Pills - (BS탭메뉴) - 일반탭메뉴/알약탭메뉴
basic BS3 - Navbar (BS메뉴바 = BS네브바) ★ - 네비게이션 메뉴바
basic BS3 - Form (BS폼양식) ★★★
basic BS3 - Input (BS입력창 = BS인풋) + Textarea (텍스트영역) + Checkbox(체크박…
basic BS3 - Input2 (BS입력창2 = BS인풋2) 일반텍스트 + Input Group(BS인풋그룹) + …
basic BS3 - Input Sizing (BS입력창크기 = BS인풋크기)
basic BS3 - Media Object (BS미디어객체) - 썸네일위치
basic BS3 - Carousel (BS캐러셀 = BS슬라이드)
basic BS3 - Modal (BS모달) ★ - 새창팝업
basic BS3 - Tooltip (BS툴팁) - 허버형말풍선 (= 도움말풍선)
basic BS3 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS3 - Scrollspy (스크롤스파이) - 원페이지메뉴링크 (= 내부링크) ※매뉴얼제작
basic BS3 - Affix (BS어픽스) - 스크롤고정 (= 스크롤상단고정 + 스크롤사이드고정) + Scrolls…
grid BS3 - Grid (그리드) - 반응형 레이아웃 ★★★
grid BS3 - Grid (.container / .container-fluid) - 그리드 (박스형/와이드형)
grid BS3 - Grid - Small (BS그리드 소형기기 이상) - col-sm-숫자
grid BS3 - Grid - Medium (BS그리드 중형기기 이상) - col-md-숫자
grid BS3 - Grid - Large (BS그리드 대형기기 이상) - col-lg-숫자
grid BS3 - Grid Examples (그리드 예제) ★★★★★
theme BS3 - Templates (BS템플릿종류 = BS테마종류) - BS레이아웃종류 ★★★
theme BS3 - Theme "Simply Me" (BS테마 - 심플미테마 = 프로필테마 = 자기소개테마 = 원페이…
theme BS3 - Theme "Company" (BS테마 - 회사테마 = 컴퍼니테마) - 회사소개테마 (슝슝) + …
theme BS3 - Theme "The Band" (BS테마 - 밴드테마) - 스크롤스파이 원페이지 테마
quiz BS3 - Quiz (BS퀴즈 = BS테스트 = BS시험)
basic BS3 - Background CSS (= BS배경색CSS)
basic BS3 - Float CSS (= BS정렬CSS = BS배치CSS)
basic BS3 - Display CSS (= BS노출CSS = BS표시CSS = BS보임 + BS숨김 = BS보이기…
grid BS3 - grid CSS (BS그리드CSS = BS반응형CSS = BS노출CSS) + BS프린트클래스 ★★…
basic BS3 - Filter (BS필터 - 테이블검색필터/리스트검색필터/드롭다운검색필터/텍스트검색필터)
basic BS3 - Spinner (BS스피너 = BS회전 = BS로더) - BS3 지원X (대신, Glyphicon…
basic BS3 - Toast (토스트) - 순간말풍선 (=짧은경고창 = 스낵바) ※ BS3 지원X
basic BS3 - Card (BS카드) - 지원 X
basic BS3 - Utilities (BS유틸클래스) - BS글자색, BS배경색, BS닫기, BS카렛, BS정렬, …
basic BS3 - flex (BS플렉스) - 지원 X
basic BS3 - Badge/Label (BS배지/BS레이블=BS라벨) ※ BS속도저하해결
basic BS3 - Transition (BS트랜지션 = BS전환효과)
basic BS3 - 요소 높이 균등 설정 (BootStrap3 / 부트스트랩3 경우) ※ 각 그리드 높이 (동일하게/…
목록
찾아주셔서 감사합니다. Since 2012