Web/Bootstrap

Bootstrap 토글 접기 Collapsible collapse 기능

saltdoll 2017. 8. 23. 08:15
반응형

Bootstap에서 기본적으로 Toggle 버튼을 아주 쉽게 지원한다.

Bootstrap Collapsible Toggle



  <button type="button" data-toggle="collapse" data-target="#demo">Simple collapsible</button>


<!--// 숨겨지는 영역 -->

<div id="demo" class="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>
<!-- 숨겨지는 영역 //-->


만약에, #demo 영역을 처음에 보여줬다가 누르면 감추기를 원한다다면.

class에 "in"을 추가하면, 처음에 나타나고, toggle버튼을 누르면 사라집니다.

<div id="demo" class="collapse in">


참고:

https://www.w3schools.com/bootstrap/bootstrap_collapse.asp



반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)