jQuery Mobile 접고 펼치기

접이 가능한 내용 블록

접이 가능한(Collapsibles)은 내용을 숨기거나 표시할 수 있으며, 일부 정보를 저장하는 데 매우 유용합니다.

접이 가능한 내용 블록을 만들기 위해, 어떤 컨테이너에도 data-role="collapsible" 속성을 할당하세요. 컨테이너(div)에, 확장할 필요 있는 HTML 태그를 포함한 제목 요소(h1-h6)를 추가하세요:

예제

<div data-role="collapsible">
  <h1>나를 클릭하세요 - 나는 접이 가능합니다!</h1>
  <p>나는 접이 가능한 내용입니다.</p>
</div>

직접 시험해 보세요

기본적으로, 이 내용은 닫혀 있습니다. 페이지 로드 시 내용을 확장하려면 data-collapsed="false"를 사용하세요:

예제

<div data-role="collapsible" data-collapsed="false">
  <h1>나를 클릭하세요 - 나는 접이 가능합니다!</h1>
  <p>지금은 기본적으로 펼쳐져 있습니다.</p>
</div>

직접 시험해 보세요

중첩된 접이 가능한 블록

접이 가능한 내용 블록을 중첩할 수 있습니다:

예제

<div data-role="collapsible">
  <h1>나를 클릭하세요 - 나는 접이 가능합니다!</h1>
  <p>내용이 펼쳐져 있습니다.</p>
  <div data-role="collapsible">
    <h1>나를 클릭하세요 - 나는 중첩된 접이 가능한 블록입니다!</h1>
    <p>내용이 중첩된 접이 가능한 블록에서 펼쳐져 있습니다.</p>
  </div>
</div>

직접 시험해 보세요

ヒント:접이 가능한 내용 블록은 원하는 만큼 중첩될 수 있습니다.

접이 가능한 셋

접이 가능한 셋(Collapsible sets)은 함께 조합된 접이 가능한 블록(대부분 악기장으로 불립니다)을 말합니다. 새로운 블록이 열리면, 모든 다른 블록이 닫힙니다.

여러 개의 내용 블록을 만들고, 그런 다음 data-role="collapsible-set"를 사용하여 새로운 컨테이너로 접이 가능한 블록을 포장하세요:

예제

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>나를 클릭하세요 - 나는 접이 가능합니다!</h1>
    <p>내용이 펼쳐져 있습니다.</p>
  </div>
  <div data-role="collapsible">
    <h1>나를 클릭하세요 - 나는 접이 가능합니다!</h1>
    <p>내용이 펼쳐져 있습니다.</p>
  </div>
</div>

직접 시험해 보세요

더 많은 예제

data-inset 속성을 통해 둥근 모서리를 제거
collapsibles에 대한 둥근 모서리를 제거하는 방법
data-mini를 통해 collapsibles를 최소화
collapsibles를 더 작게 만들어야 하는 방법
data-collapsed-icon과 data-expanded-icon을 통해 아이콘을 변경
collapsibles 아이콘을 어떻게 변경할 수 있을까요？（기본적으로는 +와 -입니다）。