jQuery Mobile - Collapsible content markup(접이식 블록)

접이식 블록의 컨텐트를 만들기 위해 컨테이너를 하나 만들고 data-role=”collapsible” 속성을 추가합니다.
이 컨테이너 안에 직접적으로 해더 엘리먼트(H1~H6)를 추가합니다. 프레임웍은 그 해더 엘리먼트를 클릭가능한 버튼으로 스타일 해주며, 확장 가능한 지시자로 왼쪽에 “+”아이콘을 추가해줍니다.

해더태그 이후에 접혀지길 원하는 어떤 HTML 마크업이라도 추가 할 수 있습니다. 프레임웍은 해해더부분 클릭할 때 보여지고 사라지는 컨테이너로 이 마크업을 감쌀 것입니다.

<div data-role="collapsible">
<h3>접이식 예제1</h3>
<p>이부분이 숨겨지고 보여질 부분입니다.</p>
</div>

기본적으로 접이식 태그는 펼쳐져서 보여지는데, 만약, 로딩시 접혀져 보여지도록 하기 위해서는 data-collapsed=”true” 속성을 추가합니다.

아래는 4가지의 다른 접이식 컨텐트를 보여줍니다.

<div data-role="collapsible" data-collapsed="true">
<h3>Section 1: Collapsed text block</h3>
<p>I'm closed when the page loads because I have the <code>data-collapsed="true"</code> attribute on my container. </p>
<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. </p>
</div><!-- /section 1 -->

<div data-role="collapsible">
<h3>Section 2: Expanded on load</h3>
<p>I'm open when the page loads because I don't have the <code>data-collapsed="true"</code> attribute on my container. </p>
<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.</p>
</div><!-- /section 2 -->

<div data-role="collapsible" data-collapsed="true">
<h3>Section 3: Form elements</h3>
<form action="#" method="get">
<div data-role="fieldcontain">
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<div data-role="fieldcontain">
    <label for="slider">Input slider:</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>
<fieldset class="ui-grid-a">
    <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
    <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>      
</fieldset>
</form>
</div><!-- /section 3 -->

<div data-role="collapsible" data-collapsed="true">
<h3>Section 4: Collapsed list</h3>
<ul data-role="listview" data-inset="true" data-theme="d">
    <li><a href="index.html">Acura</a></li>
    <li><a href="index.html">Audi</a></li>
    <li><a href="index.html">BMW</a></li>
    <li><a href="index.html">Cadillac</a></li>
    <li><a href="index.html">Chrysler</a></li>
    <li><a href="index.html">Dodge</a></li>
    <li><a href="index.html">Ferrari</a></li>
    <li><a href="index.html">Ford</a></li>
</ul>
</div><!-- /section 4 -->

Nested Collapsibles

접이식 블록을 중첩해서 사용할 수도 있습니다.

<div data-role="collapsible">
<h3>외부 접이식 예제</h3>
<p>1.이부분이 숨겨지고 보여질 부분입니다.</p>
    <div data-role="collapsible">
    <h3>내부 접이식 예제</h3>
    <p>2.이부분이 숨겨지고 보여질 부분입니다.</p>
    </div>
</div>

Collapsible sets

부모 엘리먼트에 접이식 컨텐트 셋의 data-role를 주어, 새로운 하나가 열릴 때 같은 부모안에 있는 다른 컨텐트들은 닫혀 집니다. 마치 아코디언 위젯 처럼 행동합니다.


<div data-role="collapsible-set">
<div data-role="collapsible">
    <h3>접이식 컨텐츠 셋 1번</h3>
    <p>1.이부분이 숨겨지고 보여질 부분입니다.</p>
</div>
<div data-role="collapsible" data-collapsed="true">
    <h3>접이식 컨텐츠 셋 2번</h3>
    <p>2.이부분이 숨겨지고 보여질 부분입니다.</p>
</div>
<div data-role="collapsible" data-collapsed="true">
    <h3>접이식 컨텐츠 셋 3번</h3>
    <p>3.이부분이 숨겨지고 보여질 부분입니다.</p>
</div>
</div>