[Bootstrap] Collapse(메뉴 접기, 펴기)를 사용하는 방법

Open source/Bootstrap  2019. 12. 1. 09:00

안녕하세요. 명월입니다.


이 글은 Bootstrap에서 Collapse(메뉴 접기, 펴기)를 사용하는 방법에 대한 글입니다.


Collspse란 특정 버튼을 클릭하면 해당 내용이 보였다가 안 보였다가 하는 기능입니다.

링크 - https://getbootstrap.com/docs/3.3/javascript/#collapse


사실 이 기능을 구현하기는 매우 간단합니다만, 실제 프로젝트에서 아주 빈번하게 사용하는 기능 중에 하나이기 때문에 정리해 보았습니다.


먼저 기본 형태입니다.

<!DOCTYPE html>
<html>
<head>
  <title>title</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid" style="min-height: calc(100vh - 136px);">
    <div style="margin:10px;">
      <!-- Javascript가 필요없이 data-toggle에 collapse href에 대상 id을 설정합니다. -->
      <button data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Click</button>
    </div>
    <!-- collapse 대상 태그는 class를 collapse로 설정합니다. -->
    <div class="collapse" id="collapseExample">
      <div class="well">
      hello world
      </div>
    </div>
  </div>
</body>
</html>
hello world

다음은 accordion형식의 펼치기 닫기입니다. 이건 아래처럼 꼭 위아래의 accordion이 아닌 가로로 나열하는 방법도 가능합니다.

<!DOCTYPE html>
<html>
<head>
  <title>title</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid" style="min-height: calc(100vh - 136px);">
    <!-- 그룹 태그로 role과 aria-multiselectable를 설정한다. -->
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <!-- 하나의 item입니다. data-parent 설청과 href 설정만 제대로 하면 문제없이 작동합니다. -->
      <div class="panel panel-default">
        <div class="panel-heading" role="tab">
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false">
            Item #1
          </a>
        </div>
        <div id="collapse1" class="panel-collapse collapse" role="tabpanel">
          <div class="panel-body">
            Hello world1
          </div>
        </div>
      </div>
      <!-- -->
      <!-- 하나의 item입니다.  -->
      <div class="panel panel-default">
        <div class="panel-heading" role="tab">
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false">
            Item #2
          </a>
        </div>
        <div id="collapse2" class="panel-collapse collapse" role="tabpanel">
          <div class="panel-body">
            Hello world2
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab">
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false">
            Item #3
          </a>
        </div>
        <div id="collapse3" class="panel-collapse collapse" role="tabpanel">
          <div class="panel-body">
            Hello world3
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
Hello world1
Hello world2
Hello world3

마지막으로 이벤트 설정하는 방법입니다.

<!DOCTYPE html>
<html>
<head>
  <title>title</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid" style="min-height: calc(100vh - 136px);margin-top:100px;">
    <div>
      <i class="fa fa-plus-square" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"></i>
      <span style="margin-left:10px;">Click</span>
    </div>
    <div class="collapse" id="collapseExample">
      <div class="well">
      hello world
      </div>
    </div>
  </div>
  <script>
    // Collapse로 화면이 펼치기 전에 호출
    $('.collapse').on('show.bs.collapse', function () {
      // icon을 + 마크로 변경한다.
      var target = $("[href='#"+$(this).prop("id")+"']");
      target.removeClass("fa-plus-square");
      target.addClass("fa-minus-square");
    });
    // Collapse로 화면이 펼친 후에 호출
    $('.collapse').on('shown.bs.collapse', function () {
      // icon을 + 마크로 변경한다.
      var target = $("[href='#"+$(this).prop("id")+"']");
      target.removeClass("fa-plus-square");
      target.addClass("fa-minus-square");
    });
    // Collapse로 화면에 접기 전에 호출
    $('.collapse').on('hide.bs.collapse', function () {
      // icon을 - 마크로 변경한다.
      var target = $("[href='#"+$(this).prop("id")+"']");
      target.removeClass("fa-minus-square");
      target.addClass("fa-plus-square");
    });
    // Collapse로 화면에 접고 난 후에 호출
    $('.collapse').on('hidden.bs.collapse', function () {
      // icon을 - 마크로 변경한다.
      var target = $("[href='#"+$(this).prop("id")+"']");
      target.removeClass("fa-minus-square");
      target.addClass("fa-plus-square");
    });
  </script>
</body>
</html>
Click
hello world

여기까지 Bootstrap에서 Collapse(메뉴 접기, 펴기)를 사용하는 방법에 대한 소개였습니다.


궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.

저작자표시

'Open source > Bootstrap' 카테고리의 다른 글

[Bootstrap] 탭 (Tab)  (0) 2020.02.28
[Bootstrap] Panel과 Thumbnails, Card  (0) 2020.02.27
[Bootstrap] 페이징(Paging)와 페이저(pager)  (0) 2020.02.26
[Bootstrap] 드롭 다운(Dropdown)  (0) 2020.02.24
[Bootstrap] Scrollspy  (0) 2019.09.02
[Bootstrap] 모달 (Modal)  (2) 2019.07.19
[Bootstrap] Breadcrumbs(웹 네비게이션) 디자인과 Paging 디자인  (0) 2019.07.17
[Bootstrap] 메뉴 바 ( Navbar )  (0) 2019.07.16