jQuery Mobile Collapsibles

Разборные блоки контента

Collapsibles позволяют скрывать или отображать содержимое, которое полезно для хранения частей информации.

Чтобы создать разборную блок контента, присвоить data-role="collapsible" атрибута к контейнеру. Внутри контейнера (div) , добавить заголовок (H1-H6) или элемент легенды, а затем любой HTML - разметки вы хотите быть расширен:

пример

<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>

Попробуй сам "

По умолчанию содержимое закрыто. Для расширения содержимого при загрузке страницы, использование data-collapsed="false" :

пример

<div data-role="collapsible" data-collapsed="false" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm now expanded by default.</p>
</div>

Попробуй сам "

Вложенные разборные блоки

Разборные блоки контента могут быть вложенными (разборный внутри разборный):

пример

<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
<div data-role="collapsible" >
<h1>Click me - I'm a nested collapsible block!</h1>
<p>I'm the expanded content in the nested collapsible block.</p>
</div>
</div>

Попробуй сам "

Разборные блоки контента могут быть вложены столько раз, сколько вы хотите.

Складные наборы

Разборные комплекты сборно-разборные блоки, которые сгруппированы вместе (часто называют гармошкой). Когда новый блок открыт, все остальные блоки близко.

Создайте несколько разборных блоков контента, а затем обернуть новый контейнер с данными-роли = "collapsibleset" вокруг разборных блоков:

пример

<div data-role="collapsibleset" >
<div data-role="collapsible">
    <h1>Click me - I'm collapsible!</h1>
    <p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
    <h1>Click me - I'm collapsible!</h1>
    <p>I'm the expanded content.</p>
</div>
</div>

Попробуй сам "