O'Reilly logo

jQuery Mobile Web Development Essentials Second Edition by Andy Matthews, Raymond Camden

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Working with collapsible content

The next widget we will look at in this chapter supports collapsible content. This is simply content that can be collapsed and expanded. Creating a collapsible content widget is as simple as wrapping it in a div, 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. Because most people won't care about ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required