jQuery Mobile provides a number of tools and widgets to help you format content for mobile.
Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. We don't use CSS resets or a lot of custom styles because standard HTML markup is provides a lot of visual texture out of the box. By taking a light hand with content styling, it gives designers and developers a clean slate to work with instead of fighting against a lot of complex styles. Here is what standard HTML markup looks like by default:
View default HTML renderingTo create a collapsible block of content, create a container and add the data-role="collapsible" attribute.
Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.
After the heading, add any HTML markup you want to be collapsible. The framework will wrap all this markup in a container that will be hidden or shown when the heading is clicked.
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content.</p>
</div>
By default, the content will be expaneded. To collapse the content when the page loads, add the data-state="collapsed" attribute to the wrapper.
<div data-role="collapsible" data-state="collapsed">
This will create this widget:
I'm the collapsible content.
The collapsible content is minimally styled -- we just add a bit of margin between the bar and content but you can add custom styles to tweak the appearance of the collapsible container or heading button.