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.
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.
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
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.
Content of collapsible 1.
Content of collapsible 2.
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).