Collapsible Content

Contact Us or call 1-877-932-8228
Collapsible Content

Collapsible Content

Presenting content blocks that users can toggle open and closed helps improve the user experience; saving even a few pixels of screen real estate on mobile devices' small screens is a good thing. Add data-role="collapsible" to any container element - a div, say - and jQuery Mobile displays a "collapsible", collapsed by default:

collapsible

Open up WidgetsUI/Demos/collapsible/index.html to check out the code and view the live demo. Here's the code from the screenshot above:

<div data-role="collapsible">
	<h3>Content</h3>
	<p>Quis, te camur loquor augue nimis vero paratus te, quis, neo delenit. Luptatum, blandit esca roto iriure enim fatua dolore lobortis. Ad ut, similis pecus te, sudo, nisl praesent suscipit. Acsi, eu ne esse ut euismod genitus, nisl.</p>
	<p>Tation eligo regula saepius amet duis macto quis ideo praesent dolore ut sudo inhibeo.</p>
</div>

Notice that jQuery Mobile labels the collapsible's toggle bar with the text contents of the first header element (H1 - H6) inside the data-role="collapsible" and sets the icon at left with plus and minus sign for the open and close actions. The element is collapsed by default (i.e., on page load); use attribute data-collapsed="false" to display the element as open when the page loads.

You can set the element as "mini" (data-mini="true") to display the collapsible slightly smaller. You can position the icon on the toggle bar with attribute data-iconpos="right".

Collapsible Sets

Add a container element with attribute data-role="collapsible-set" around multiple collapsibles and jQuery Mobile displays a collapsible set. Open one collapsible and the rest of its set-mates collapse - a useful way to present a volume of content in a small space:

Collapsible Set

Open up WidgetsUI/Demos/collapsible/set.html to view the code and view the live demo. Here's the code from the screenshot above:

<div data-role="collapsibleset">
	<div data-role="collapsible">
		<h3>Item 1</h3>
		<p>Item 1 tation eligo regula saepius amet duis macto quis ideo praesent dolore ut sudo inhibeo.</p>
	</div>
	<div data-role="collapsible">
		<h3>Item 2</h3>
		<p>Item 2 tation eligo regula saepius amet duis macto quis ideo praesent dolore ut sudo inhibeo.</p>
	</div>
	<div data-role="collapsible">
		<h3>Item 3</h3>
		<p>Item 3 tation eligo regula saepius amet duis macto quis ideo praesent dolore ut sudo inhibeo.</p>
	</div>
</div>
Next