11/16 44-1 [BS] Collapse_2

 앞에 배운 collaapse를 자바 스크립트로 구현하기 !

 

 

버튼이랑

내용들  div로 감싸고 class='collapse' 

(다른 내용들이랑 중복이 있어서 id는 따로 추가한 거임!)

          <h2>자바스크립트로 collapse(펼치다) 구현하기</h2>
          
          <button type="button" class="btn btn-primary">Toggle</button>
          <button type="button" class="btn btn-success">Show</button>
          <button type="button" class="btn btn-warning">Hide</button>            
          <button type="button" class="btn btn-info" id="vanilla">바닐라 자바스크립트</button>   

          <div class="collapse" id="collapse">  <!-- id="collapse" 요건 추가한거 -->
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </div>

 

  1. JQuery로 구현 (아직 배우기 전 이지만 미리 익혀둬...)

$( ) 이게 JQuery에서 쓰는 함수라고함

.click은 자스에서 onclick과 같은거 ! 함수사용은 비슷하고...  요 정도만? 

 <script>
              //이건 jQuery로 구현
            $('button.btn-primary').click(function(){
              $('#collapse').collapse('toggle');
            });
            $('button.btn-success').click(function(){
              $('#collapse').collapse('show');
            });
            $('button.btn-warning').click(function(){
              $('#collapse').collapse('hide');
            });
            $("#collapse").on('show.bs.collapse', function(){
              console.log('show.bs.collapse이벤트 발생');
            });
            $("#collapse").on('shown.bs.collapse', function(){
              console.log('shown.bs.collapse이벤트 발생');
            });
            $("#collapse").on('hide.bs.collapse', function(){
              console.log('hide.bs.collapse이벤트 발생');
            });
            $("#collapse").on('hidden.bs.collapse', function(){
              console.log('hidden.bs.collapse이벤트 발생');
            });
 </script>

 

2. 바닐라 자바스크립트로 구현(순수 자바스크립트)

 <script>
           var vanilla = document.querySelector('#vanilla');
           var collapse = document.querySelector('#collapse');      
           
           var toggle=false;
            //버튼에 클릭 이벤트 리스너 부착  
           vanilla.onclick =function(e){   //collapse라는 아이디를 가진 div를 펼쳤다 접었다(toggling)
              if(!toggle)
                collapse.style.display='block';         
              else
                collapse.style.display='none';
                toggle = !toggle       
           };
  </script>

해보기!

Collapse.html

0.01MB