부트스트랩 (12) Collapse 메소드

Frameworks/Bootstrap 2019. 7. 10. 11:14
728x90
728x90

부트스트랩 Collapse를 이용하여 웹사이트의 탭 기능을 구현해보겠습니다.

클래스 collapse show => 콜랩스 대상 초기값 보여주는 상태
클래스 collapse => 콜랩스 대상 초기값 숨겨둔 상태

* card card-body
* collapse

.collapse('show')
.collapse('hide')
.collapse('toggle')

* ready가 되었다가 클릭이 발생되면 collapse아이템을 보여주거나/보여주지 않게 된다.

 $(document).ready(function () {
     $('#btn1').on('click', function () {
        let collapses = $('div.container').find('.collapse');  //collapse라는 자식을 찾아서 배열을 불러온다.
        collapses.each(function () {
          $(this).collapse('toggle');
        });
     });
});

 

 

 

 

실습하기

 

메소드를 소환하는 방식

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩 collapse</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
    
<div class="container mt-3">
    <h3><code>속성 data-toggle 공통</code></h3>
    <div>
      <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
        a링크 href
      </a>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
        버튼 data-target
      </button>
    </div>
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life 
        accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, 
        craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩 collapse</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
  </style>
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <script>
  </script>
<div class="container mt-3">
    <h3><code>속성 data-toggle 공통</code></h3>
    <div>
      <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
        a링크 href
      </a>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
        버튼 data-target
      </button>
    </div>
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
</div>
<div class="container mt-3">
    <h3><code>속성 data-toggle 공통</code></h3>
    <div>
      <a class="btn btn-primary" data-toggle="collapse" href="#collapse1">
        토글 1
      </a>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse2">
        토글 2
      </button>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse1, #collapse2">
        토글 both
      </button>
    </div>
    <div class="collapse" id="collapse1">
      <div class="card card-body">
        11111 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus 
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore 
        wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
    <div class="collapse" id="collapse2">
      <div class="card card-body">
        22222 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus 
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore 
        wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
</div>
</body>
</html>

 

 

 

 

제이쿼리 Collapse 방식 코드

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩 collapse</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
  </style>
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <script>
    $(document).ready(function () {
      console.log("ready!");
      $('#btn1').on('click', function () {
        console.log('clicked')
        let collapses = $('div.container').find('.collapse');
        console.log(collapses);
        collapses.each(function () {
          $(this).collapse('toggle');
        });
      });
    });
  </script>
  <div class="container mt-3">
    <h3><code>속성 data-toggle 공통</code></h3>
    <div>
      <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
        a링크 href
      </a>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
        버튼 data-target
      </button>
    </div>
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim
        keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="container mt-3">
    <h3><code>속성 data-toggle 공통</code></h3>
    <div>
      <a class="btn btn-primary" data-toggle="collapse" href="#collapse1">
        토글 1
      </a>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse2">
        토글 2
      </button>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse1, #collapse2">
        토글 both
      </button>
      <!-- 자바스크립트 -->
      <button class="btn btn-success" id="btn1">클릭
      </button>
    </div>
    <div class="collapse" id="collapse1">
      <div class="card card-body">
        11111 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore
        wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
    <div class="collapse" id="collapse2">
      <div class="card card-body">
        22222 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore
        wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</body>

</html>

 

728x90
728x90
저작자표시 비영리 변경금지

'Frameworks > Bootstrap' 카테고리의 다른 글

부트스트랩 (14) Carousel 슬라이드쇼  (2) 2019.07.10
부트스트랩 (13) 카드 (프로필 꾸미기)  (2) 2019.07.10
부트스트랩 (11) onload 이벤트  (0) 2019.07.10
부트스트랩 (10) hidden, block, display:none 비교  (0) 2019.07.10
부트스트랩 (9) 폰트어썸을 이용한 소스 활용 (아이콘) + viewport 예제  (0) 2019.07.10
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,
250x250
250x250
English Korean
05-03 14:56

티스토리툴바

v