[Bootstrap] Collapse / 접힌 목록

Collapse / 접힌 목록

 

몇 가지 클래스와 JavaScript 플러그인을 사용하여 

프로젝트 전체의 콘텐츠 가시성을 전환합니다.

 

클래스 변경을 통해 다른 요소를 표시하거나 숨기려면 아래 버튼을 클릭하세요.

 

. collapse는 콘텐츠를 숨 깁니다.

. collapsing은 전환 중에 적용됩니다.

. collapse.show는 콘텐츠를 보여줍니다

href 속성이있는속성이 있는 링크 또는 data-target 속성이 있는 버튼을 사용할 수 있습니다.

두 경우 모두 data-toggle = "collapse"가 필요합니다.

href type & button type

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

 

여러 접힌 대상

<button> 또는 <a>는 href 또는 data-target 속성에서

 JQuery 선택기로 참조하여 여러 요소를 표시하고 숨길 수 있습니다. 

 

여러 <button> 또는 <a>는 각각 href 또는 data-target 속성으로 

요소를 참조하는 경우 요소를 표시하고 숨길 수 있습니다.

단일 대상

양쪽 모두 선택

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Accordion

카드 구성 요소를 사용하면 기본 축소 동작을 확장하여 아코디언을 만들 수 있습니다.

아코디언 선택

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Accessibility

컨트롤 요소에 aria-expanded를 추가해야합니다. 

 

축소 가능 요소가 기본적으로 닫혀있는 경우 제어 요소의 속성 값은 aria-expanded = "false"여야 합니다. 

show 클래스를 사용하여 축소 가능 요소가 기본적으로 열리도록 설정 한 경우 대신 

컨트롤에서 aria-expanded = "true"를 설정합니다. 

 

플러그인은 접을 수있는 요소가 열리거나 닫혔는지 여부에 따라 (JavaScript를 통해 

또는 사용자가 동일한 축소 요소에 연결된 다른 컨트롤 요소를 트리거했기 때문에) 

컨트롤에서 이 속성을 자동으로 전환합니다. 

 

컨트롤 요소의 HTML 요소가 

버튼이 아닌 경우 (예 : <a> 또는 <div>), role = "button"속성을 요소에 추가해야 합니다.

컨트롤 요소가 단일 축소 가능 요소를 대상으로하는 경우

 (예 : data-target 속성이 id 선택기를 가리키는 경우) 축소 가능 요소의 ID를 포함하는 

aria-controls 속성을 컨트롤 요소에 추가해야합니다. 

 

최신 화면 판독기 및 유사한 보조 기술은이 속성을 사용하여 

사용자에게 접을 수있는수 있는 요소 자체로 직접 이동할 수 있는 추가 바로 가기를 제공합니다.

Bootstrap의 현재 구현은 WAI-ARIA Authoring Practices 1.1 아코디언 패턴에 설명된 

다양한 키보드 상호 작용을 다루지 않습니다.

맞춤 자바 스크립트에 직접 포함해야합니다.