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.
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)?
<div data-role=”collapsible”>
<!– this is a collapsible block –>
</div>
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.
<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>
Collapsible blocks can also be nested, resulting in a series of blocks which control various paragraphs and content:
<!– 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>
<!– 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>
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…