bootstrap_collapse

<collapse>

• 컨텐츠를 펴쳐서 보이거나 접어 숨기기 위한  클래스
• 보이기 숨기기 기본 설정은 data-toggle="collapse"이며, 숨기기 기능이 동작
• 숨기기 toggle 기능은 <a>혹은 <button>요소에 추가
• data-target = # 속성으로 버튼을 접을 수 있는 컨텐츠 <div id ="">와 연결

<div class="container">
  <h2>Show Collapsible Content By Default</h2>
  <p>Add the show class next to the collapse class to show the content by default.</p>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse show">
    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>
</div>

 

• class="collapse" 결과 (버튼 클릭하면 내용 표시)

• class = "collapse show" 결과