Whizu

jQuery Mobile in Java

View project on GitHub
Whizu Download
jQuery Mobile widgets
Pages Accordions Buttons Collapsibles

jQuery Mobile Collapsibles

Collapsibles are simple widgets that allow you to expand or collapse content when tapped and are useful in mobile to provide a compact presentation of content. Whizu provides you with a fluent CollapsibleBuilder API to create Collapsibles in Java. Collapsibles can be grouped into an Accordion.

How to use CollapsibleBuilder to create a jQM collapsible

Check out the CollapsibleBuilder API to find out how to create collapsibles and see which options are available in the API. Here's a basic example on how to use the CollapsibleBuilder API. The static .createWithTitle() method creates a new CollapsibleBuilder instance that your can further configure using any of the other member methods to specify exactly how you want your collapsible to be built. Finally call the .build() method on the CollapsibleBuilder to finally build the collapsible instance.

import org.whizu.content.Content;
import org.whizu.html.Html;
import org.whizu.jquery.mobile.Collapsible;
import org.whizu.jquery.mobile.CollapsibleBuilder;

// @formatter:off
Content paragraph = Html.p("I'm the collapsible content. By default 
        I'm closed, but you can click the header to open me.");

Collapsible collapsible = CollapsibleBuilder.createWithTitle("Heading")
    .add(paragraph)
    .build();
// @formatter:on

Here's the resulting collapsible when collapsed.

And here's when expanded.

Basics of jQuery Mobile collapsible markup

To create a collapsible block of content in HTML, you need to create a container (div) and add the data-role=“collapsible” attribute. Directly inside this container, Whizu adds a header (H3) element with the title. The jQuery Mobile framework will style the header to look like a clickable button and add a “+” icon to the left to indicate it's expandable. After the header, add any HTML markup or Content you want to be collapsible. The framework will wrap this content in a container that will be hidden/shown when the heading is clicked.

Here's the markup for the above collapsible.

<div data-role="collapsible">
  <h3>Heading</h3>
  <p>I'm the collapsible content. By default I'm closed, 
     but you can click the header to open me.</p>
</div>

Expand on page load

To expand the content when the page loads, add the data-collapsed=“false” attribute to the wrapper by calling the .expandOnLoad() method on the CollapsibleBuilder.

// @formatter:off
Collapsible collapsible = CollapsibleBuilder.createWithTitle("Heading")
    .expandOnLoad()
    .p("I'm the collapsible content. By default I'm open.")
    .build();
// @formatter:on

Assigning a collapsible theme

You can set the theme of the collapsible's heading to any of the color swatches from the theme. These are the different default possibilities (theme A, B, C, D, E).

It is also possible to provide a stronger visual connection between the collapsible header and content, by setting the theme for the content of the collapsible. This applies the swatch's border and flat background color (not the gradient) to the content block, removes the rounded corners from the bottom of the header, and gives the bottom of the content block rounded corners to visually group these elements.

Here's an example.

Collapsible collapsible = CollapsibleBuilder.createWithTitle("Heading")
    .theme(Theme.B) // theme for the heading
    .contentTheme(Theme.D) // theme for the content
    .p("I'm the collapsible content with a themed 
            content block set to d")
    .build();

It looks like this.

Mini for smaller-sized collapsibles

For a more compact version that is useful in toolbars and tight spaces, add the data-mini=“true” attribute to the collapsible to create a mini version.

ListView listView = ListViewBuilder.create()
    .addItem("List item 1")
    .addItem("List item 2")
    .addItem("List item 3")
    .build();

Collapsible collapsible = CollapsibleBuilder.createWithTitle("Heading")
    .mini()
    .add(listView)
    .build();

Changing icons of a collapsible

The default icons of collapsible headings can be overridden by using the data-collapsed-icon and data-expanded-icon attributes. In the example below, data-collapsed-icon=“arrow-d” and data-expanded-icon=“arrow-u”.

ListView listView = ListViewBuilder.create()
    .addItem("List item 1")
    .addItem("List item 2")
    .addItem("List item 3")
    .build();

Collapsible collapsible = CollapsibleBuilder.createWithTitle("Heading")
    .theme(Theme.B)
    .contentTheme(Theme.D)
    .iconCollapsed(DataIcon.ARROW_DOWN)
    .iconExpanded(DataIcon.ARROW_UP)
    .add(listView)
    .build();

Icon positioning

The default icon positioning of collapsible headings can be overridden by using the data-iconpos attribute. In the below case, data-iconpos=“right”.

Collapsible c = CollapsibleBuilder.createWithTitle("I'm a header")
    .iconPosition(DataIconPosition.RIGHT)
    .p("data-iconpos=right")
    .build();

Non-inset collapsible

By default collapsibles have an inset appearance. To make them full width without corner styling add the data-inset=“false” attribute to the jQuery Mobile collapsible by calling the .noCornerStyling() method on the CollapsibleBuilder.

// @formatter:off
Content paragraph = Html.p("I'm the collapsible content. By default 
        I'm closed, but you can click the header to open me.");

Collapsible collapsible = CollapsibleBuilder.createWithTitle("Heading")
    .noCornerStyling()
    .add(paragraph)
    .build();
// @formatter:on

Set of individual collapsibles

This is an example of a series of individual collapsibles. The difference with an Accordion is that multiple collapsible rows can be open at once.

Collapsible pets = CollapsibleBuilder.createWithTitle("Pets")
    .build();

Collapsible farm = CollapsibleBuilder.createWithTitle("Farm Animals")
    .build();

Collapsible wild = CollapsibleBuilder.createWithTitle("Wild Animals")
    .build();       

page.add(pets);
page.add(farm);
page.add(wild);

Javadoc API reference

The core classes and interfaces involved in creating jQM collapsibles are the following.

Some related API's include:

Written by Rudy D'hauwe | Copyright © 2013 | All rights reserved.