Working with collapsible content

The next widget we will look at in this chapter supports collapsible content. This is simply the content that can be collapsed and expanded. Creating a collapsible content widget is as simple as wrapping it in a div block, adding data-role="collapsible", and including a title for the content. Consider the following simple example:

<div data-role="collapsible">
  <h1>My News</h1>
  <p>This is the latest news about me…
</div>

Upon rendering, jQuery Mobile will turn the title into a clickable banner that can expand and collapse the content within. Let's look at a real example. Imagine you want to share the location of your company's primary address. You also want to include satellite offices. Since most people won't care about the other offices, we can use a simple collapsible content widget to hide the content by default. The following code snippet, Listing 7-3, demonstrates an example of...