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)?
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>
The jQuery Mobile framework needs a heading element to be present...