Whizu

jQuery Mobile in Java

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

jQuery Mobile Accordions

An accordion is created in jQuery Mobile by grouping a series of individual collapsibles into a set. Whizu provides you with a fluent AccordionBuilder API to create Accordions in Java.

How to use AccordionBuilder to create a jQM accordion

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

import org.whizu.jquery.mobile.Accordion;
import org.whizu.jquery.mobile.AccordionBuilder;
import org.whizu.jquery.mobile.Collapsible;
import org.whizu.jquery.mobile.CollapsibleBuilder;
import org.whizu.jquery.mobile.Theme;

// @formatter:off
Collapsible c1 = CollapsibleBuilder.createWithTitle("Section 1")
    .p("I'm the collapsible content for section 1")
    .build();

Collapsible c2 = CollapsibleBuilder.createWithTitle("Section 2")
    .p("I'm the collapsible content for section 2")
    .build();

Collapsible c3 = CollapsibleBuilder.createWithTitle("Section 3")
    .p("I'm the collapsible content for section 3")
    .build();       

Accordion accordion = AccordionBuilder.create()
    .addCollapsible(c1)
    .addCollapsible(c2)
    .addCollapsible(c3)
    .theme(Theme.C)
    .contentTheme(Theme.D)
    .build();
// @formatter:on

Here's the resulting accordion with the first collapsible expanded.

Basics of jQuery Mobile accordion markup

To create a accordion block of content in HTML, you need to create a container (div) and add the data-role=“collapsible-set” attribute. Directly inside this container, you can add individual collapsibles. The collapsibles will be visually grouped and they will behave like an accordion so only one section can be open at a time.

Here's the markup for the above accordion.

<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
    <div data-role="collapsible">
        <h3>Section 1</h3>
        <p>I'm the collapsible content for section 1</p>
    </div>
    <div data-role="collapsible">
        <h3>Section 2</h3>
        <p>I'm the collapsible content for section 2</p>
    </div>
    <div data-role="collapsible">
        <h3>Section 3</h3>
        <p>I'm the collapsible content for section 3</p>
    </div>
</div>

Assigning an accordion theme

You can set the theme of the heading of each individual collapsible in the accordion to any of the color swatches from the theme. It is also possible to set the theme for the content section of each of the collapsibles in the accordion.

To have individual content sections in a group styled differently, add data-theme and data-content-theme attributes to the specific collapsibles.

These are the different possibilities (theme A, B, C, D, E).

Here's an example.

Collapsible c1 = CollapsibleBuilder.createWithTitle("Swatch B")
    .p("Collapsible content, swatch b")
    .build();

Collapsible c2 = CollapsibleBuilder.createWithTitle("Swatch A")
    .theme(Theme.A)
    .build();

Collapsible c3 = CollapsibleBuilder.createWithTitle("Swatch E")
    .theme(Theme.E)
    .build();       

Accordion accordion = AccordionBuilder.create()
    .addCollapsible(c1)
    .addCollapsible(c2)
    .addCollapsible(c3)
    .theme(Theme.B)
    .contentTheme(Theme.B)
    .build();

It looks like this.

Mini for smaller-sized accordions

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

Accordion accordion = AccordionBuilder.createWithTitle()
    .mini()
    .addCollapsible(c1)
    .addCollapsible(c2)
    .addCollapsible(c3)
    .build();

Changing icons of a accordion

The default icons of collapsible headings can be overridden by using the data-collapsed-icon and data-expanded-icon attributes, either at the collapsible-set level or on any of its collapsibles individually.

Collapsible c1 = ...

Collapsible c2 = ...

Collapsible c3 = CollapsibleBuilder.createWithTitle(
                            "Icon set on this collapsible")
    .iconCollapsed(DataIcon.GEAR)
    .iconExpanded(DataIcon.DELETE)
    .build();

Accordion accordion = AccordionBuilder.createWithTitle()
    .theme(Theme.B)
    .contentTheme(Theme.D)
    .iconCollapsed(DataIcon.ARROW_RIGHT)
    .iconExpanded(DataIcon.ARROW_LEFT)
    .addCollapsible(c1)
    .addCollapsible(c2)
    .addCollapsible(c3)
    .build();

Icon positioning

The default icon positioning of collapsible headings can be overridden by using the data-iconpos attribute, either at the collapsible-set level or on any of its collapsibles.

Collapsible right = ...
Collapsible left = ...
Collapsible bottom = ...
Collapsible top = ...

Accordion accordion = AccordionBuilder.createWithTitle()
    .iconPosition(DataIconPosition.RIGHT)
    .addCollapsible(right)
    .addCollapsible(left)
    .addCollapsible(bottom)
    .addCollapsible(top)
    .build();

Non-inset accordion

By default accordions have an inset appearance. To make them full width without corner styling add the data-inset=“false” attribute to the jQuery Mobile accordion by calling the .noCornerStyling() method on the AccordionBuilder. This makes the accordion set look more like an expandable listview.

Accordion accordion = AccordionBuilder.createWithTitle()
    .noCornerStyling()
    .addCollapsible(animals)
    .addCollapsible(cars)
    .addCollapsible(planets)
    .build();
// @formatter:on

Accordion without rounded corners

There is an option for making the corners square instead of rounded (data-corners) by calling the .square() method on the AccordionBuilder.

Accordion accordion = AccordionBuilder.createWithTitle()
    .square()
    .addCollapsible(c1)
    .addCollapsible(c2)
    .addCollapsible(c3)
    .build();

Javadoc API reference

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

Some related API's include:

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