부트스트랩 4 축소
기본 접이식
축소형은 많은 양의 콘텐츠를 숨기거나 표시하려는 경우에 유용하다.
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.
예제 1
.collapse 클래스는 축소 가능한 요소(이 예에서는 <div>)를 나타낸다.
버튼을 클릭하면 표시되거나 숨겨지는 콘텐츠다.
접을 수 있는 콘텐츠를 제어(표시/숨기기)하려면 <a> 또는 <button> 요소에 data-toggle=”collapse” 속성을 추가한다.
그런 다음 버튼을 축소 가능한 콘텐츠(<div id=”demo”>)와 연결하는 data-target=”#id” 속성을 추가한다.
⭐ href <a> 요소의 경우 속성 대신 data-target 속성을 사용할 수 있다.
<button data-toggle="collapse" data-target="#demo">Collapsible</button> <div id="demo" class="collapse"> Lorem ipsum dolor text.... </div>
기본 예시
예제 보기예제 2
<a href="#demo" data-toggle="collapse">Collapsible</a> <div id="demo" class="collapse"> Lorem ipsum dolor text.... </div>
기본 예시
예제 보기예제 3
<div id="demo" class="collapse show"> Lorem ipsum dolor text.... </div>
기본 예시
예제 보기아코디언
통증 자체를 돌보는 것이 중요하고, 그에 따라 환자의 성장이 따르겠지만, 동시에 많은 일과 고통이 따르게 마련입니다. 가장 작은 세부 사항까지 말하자면, 어떤 종류의 일이든 그로부터 어떤 이익을 얻지 않는 한 누구도 실행해서는 안 됩니다.
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.
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 id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
</div>
기본 예시
예제 보기참고
W3C School - Bootstrap – Bootstrap 4 Collapse
공부 목적 블로그