Barry's jQuery Mobile Demos: Collapsibles

Collapsibles

Collapsibles are similar to panels in that they reveal text and can be dismissed. However, a collapsible is horizontally oriented and reveals its contents by pushing the text below it out of the way. Collapibles are becoming very popular for revealing advertisements in text oriented websites. A collapsible is defined within the main page body at the place where it will appear. As an example, the following code defines a collapsible.

<div data-role="collapsible">
      <h1>Example collapsible</h1>
      <p>Content of collapsible.</p>
    </div>

This code is inserted after this sentence, click on he '+' icon to see the expanded text.

Example collapsible

Content of collapsible.

Sometimes we wish the collapsible to be expanded when the page loads. This can be done by adding the attribute data-collapsed="false" to the collapsible definition header as in the following example.

Example collapsible

This collapsible is opened on page load. It has the attribute data-collapsed="false" in the collapsible definition header.

We can also define a block with a set of collapsible widgets that are neatly displayed together. We define these by using an enclosing <div> tag with attribute data-role="collapsibleset". For example, we can define a collapsible set of three collapsibles as follows.

<div data-role="collapsibleset">
  <div data-role="collapsible">
    <h1>Collapsible 1</h1>
    <p>Content of collapsible 1.</p>
  </div>
  <div data-role="collapsible">
    <h1>Collapsible 2</h1>
    <p>Content of collapsible 2.</p>
  </div>
  <div data-role="collapsible">
    <h1>Collapsible 3</h1>
    <p>Content of collapsible 3.</p>
  </div>
</div>

This code is inserted after this sentence.

Collapsible 1

Content of collapsible 1.

Collapsible 2

Content of collapsible 2.

Collapsible 3

Content of collapsible 3.

Try out the collapsible components above by touch/click on the icons. Note that only one collapsible in a collapsible set can be open at any one time (similar to radio buttons).

Home