반응형
Bootstap에서 기본적으로 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
반응형
'Web > Bootstrap' 카테고리의 다른 글
Bootstrap를 이용한 마우스 오버시 Tooltip 설명 나오는 예제 (0) | 2021.02.04 |
---|---|
Bootstrap 4 달력 : datetimepicker (Bootstrap 3버전 업그레이드 버전) 인기 달력 (2) | 2020.01.15 |
Bootstrap 4에서 svg 아이콘 사용하기 (0) | 2018.12.05 |
Bootstrap 4 Display 유틸리티 - table columns 을 hide 처리하기 (0) | 2018.11.30 |
Bootstrap 반응형 테이블 FooTable (Plug In) 검색/페이지네이션 추가됨 (0) | 2017.08.17 |
jQuery Bootgrid 간편한 그리드 표시 (페이지네이션, 검색 기능 PlugIn) (0) | 2017.07.22 |
Bootstrap Table Grid sort 처리 - Datatables (0) | 2017.03.09 |
Bootstrap 스크롤된 페이지 위로 올라가기 ( Back to Top ) (0) | 2016.12.29 |
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)
(로그인하지 않으셔도 가능)