기본 축소성(Collapsible)

축소성은 많은 양의 컨텐츠를 숨기고 표시하려는 경우에 유용합니다.

<div class="container">
  <h2>기본 축소성</h2>
  <p>버튼 클릭에 따라 컨텐츠의 보이기/숨기기가 토글됩니다.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">기본 축소성</button>
  <div id="demo" class="collapse">
    365ok.co.kr에서는 다양한 웹강좌를 제공합니다. 실전홈페이지제작, CSS Grid, CSS Flexbox, PHP5와 그누보드, HTML, CSS, Javascript,....
  </div>
</div>

HTML 요소에 .collapse클래스를 추가하면 접을 수 있는 요소가 됩니다. 버튼을 추가하여 클릭으로 표시되거나 숨길 수 있습니다.

컨텐츠를 제어(표시/숨기기)하려면 <a>또는 <button>요소에 data-toggle="collapse"속성을 추가합니다.

그런 다음 data-target="#id"속성을 추가하여 접을 수 있는 컨텐츠(위 소스 예에서는 <div id="demo">)로 연결합니다.

** <a>요소인 경우 data-target속성 대신에 href속성을 사용할 수도 있습니다.

<div class="container">
  <h2>기본 축소성</h2>
  <p>버튼 클릭에 따라 컨텐츠의 보이기/숨기기가 토글됩니다.</p>
  <a class="btn btn-primary" data-toggle="collapse" href="#demo">기본 축소성</button>
  <div id="demo" class="collapse">
    365ok.co.kr에서는 다양한 웹강좌를 제공합니다. 실전홈페이지제작, CSS Grid, CSS Flexbox, PHP5와 그누보드, HTML, CSS, Javascript,....
  </div>
</div>

**기본적으로 접을 수 있는 컨텐츠는 숨겨져 있습니다. 그러나 .show클래스를 추가하면 기본값으로 내용을 표시할 수 있습니다.

<div class="container">
  <h2>기본 축소성</h2>
  <p>버튼 클릭에 따라 컨텐츠의 보이기/숨기기가 토글됩니다.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">기본 축소성</button>
  <div id="demo" class="collapse show">
    365ok.co.kr에서는 다양한 웹강좌를 제공합니다. 실전홈페이지제작, CSS Grid, CSS Flexbox, PHP5와 그누보드, HTML, CSS, Javascript,....
  </div>
</div>

아코디언(Accordion)

다음 예제는 카드 구성요소를 확장하여 간단한 아코디언을 보여줍니다.

.card클래스와 .collapse클래스를 조합하여 멋진 아코디언을 구현합니다.

** 접을 수 있는 항목중 하나가 표시되면 지정된 부모 아래에 있는 나머지 접을 수 있는 모든 요소는 닫혀야 합니다. 이것을 구현하기 위해 data-parent="#accordion"속성을 사용합니다.

<div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          실전홈페이지제작강좌
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          HTML, CSS기초부터 그누보드5 적용단계까지 홈페이지제작 전과정 강좌를 진행합니다. 99,000원에 기간제한없이 https://365ok.co.kr에서 진행하는 모든 강좌를 이용할 수 있습니다.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        CSS Grid 강좌
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          웹사이트 레이아웃을 위한 획기적인 CSS 표준, CSS Grid강좌입니다.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
          PHP5 & 그누보드5 강좌
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          PHP5강좌를 진행하면서 그누보드5에 사용된 사례를 겸하여 이해를 높여줍니다.
        </div>
      </div>
    </div>
</div>