O'Reilly logo

Building UIs with Wijmo by Yuguang Zhang

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

Creating an expander widget

The expander is for collapsible content. Unlike the accordion, it only has a single section. To create an expander, wrap the collapsible block in a single-parent element and apply the data-role="wijexpander" attribute to the parent element. You can see how to do this in the following example, where only the contents of the body tag are shown:

<div data-role="page" data-theme="b">
<div data-role="content">
<div data-role="wijexpander">
<h3>Header</h3>

<div>
Loremipsum...
</div>
</div>
</div>
</div>

The default for an expander shows the content within the block.

Passing options to the expander widget

To make the expander collapsed by default, we use the data-options attribute and set expanded to false.

<div data-role="wijexpander" ...

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