jQuery Mobile First Look

Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development

The reader would benefit by referring the previous article on How to Use jQuery Mobile Grid and Columns Layout.

A note on collapsible blocks

On a completely different note, jQuery Mobile provides an easy-to-use and visually-appealing solution to hide and show content, namely, the so-called collapsible blocks.

Collapsible blocks should be already well-known to the web designers out there, and they have gained in popularity especially after the advent of JavaScript libraries and frameworks like jQuery, which have made writing the necessary code a matter of minutes to obtain a pane which shows its content once a button (or any kind of element, actually) is clicked. The following screenshot shows how jQuery Mobile renders, by default, any collapsible block we include into our web page:

So, how do we create a (set of) collapsible block(s)?

1. Collapsible blocks are obtained by assigning a container the data-role=”collapsible” attribute. As easy as that.

   <div data-role=”collapsible”>
   <!– this is a collapsible block –>
   </div>

2. The jQuery Mobile framework needs a heading element to be present inside the container. The heading (which can be from h1 through h6) will be styled like a clickable button, and a plus (+) symbol will be added to its left to indicate it’s expandable. Once we click the header/button and the content shows, a minus (-) symbol will replace the plus to indicate it’s collapsible.

   Where do I put the heading?
   The heading can be placed anywhere inside the container. Remember that jQuery Mobile will use as a header the very first h-element it finds inside the container, and remove it from its original position.
   Once the required header is provided, you can add any other h-element to the container and it will not be processed (that is, it will behave like a normal heading would).

   <div data-role=”collapsible”>
   <h3>Collapsible block header</h3>
   <p>Lorem ipsum dolor sit amet etc….</p>
   </div>

   

   We used an h3 heading in this example, but any other heading would have looked just the same: jQuery Mobile changes completely the style of the heading to match a button’s style.

3. We can specify whether we want a collapsible block to be expanded on page load or not by adding the data-collapsed=”true” attribute to the container:

   <div data-role=”collapsible” data-collapsed=”true”>
   <h3>This block will be collapsed (does not show content)</h3>
   <p>Lorem ipsum dolor sit amet etc….</p>
   </div>

   <div data-role=”collapsible”>
   <h3>This block will expand on page load</h3>
   <p>This text is visible right away!</p>
   </div>

Nested collapsible blocks

Collapsible blocks can also be nested, resulting in a series of blocks which control various paragraphs and content:

1. To create a set of nested collapsible blocks, we only need to insert a block into another block, which will be its container:

   <!– Top level collapsible block –>
   <div data-role=”collapsible”>
   <h3>Collapsible block header</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

   <!– nested collapsible block –>
   <div data-role=”collapsible”>
   <h3>Nested collapsible block</h3>
   <p>Class aptent taciti sociosqu ad litora torquent per conubia
   nostra, per inceptos himenaeos.</p>
   </div>
   </div>

2. We may have any number of collapsible blocks nested; for example, here is another one:

   <!– Top level collapsible block –>
   <div data-role=”collapsible”>
   <h3>Collapsible block header</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

   <!– nested collapsible block –>
   <div data-role=”collapsible”>
   <h3>Nested collapsible block</h3>
   <p>Class aptent taciti sociosqu ad litora torquent per conubia
   nostra, per inceptos himenaeos.</p>

   <!– nested into a nested block –>
   <div data-role=”collapsible”>
   <h3>Nested into a nested collapsible block</h3>
   <p>Integer lectus eros, accumsan eget ultrices vel, sagittis
   volutpat odio.</p>
   </div>
   </div>
   </div>