jQuery Mobile Сворачиваемые блоки

Сворачиваемые блоки содержимого

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

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

Пример

<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>

Попробуйте сами »

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

Наборы сворачиваемых блоков

Набор сворачиваемых блоков объединяет сворачиваемые блоки вместе (как аккордеон). Когда один сворачиваемый блок раскрывается, все остальные блоки сворачиваются.

Создайте несколько сворачиваемых блоков содержимого, а затем оберните сворачиваемые блоки содержимого в новый контейнер с 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>

Попробуйте сами »