Collapsible set Widget

Categories: Widgets

Collapsible set Widgetversion added: 1.0

Description: Creates a collapsible set of collapsible blocks of content

QuickNavExamples

Options

Methods

Events

Collapsible sets start with the exact same markup as individual collapsibles. By adding a parent wrapper with a data-role="collapsible-set" attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.

By default, all the sections will be collapsed. To set a section to be open when the page loads, add the data-collapsed="false" attribute to the heading of the section you want expanded.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div data-role="collapsible-set">
 
  <div data-role="collapsible" data-collapsed="false">
    <h3>Section 1</h3>
    <p>I'm the collapsible set content for section 1.</p>
  </div>
 
  <div data-role="collapsible">
    <h3>Section 2</h3>
    <p>I'm the collapsible set content for section 2.</p>
  </div>
 
</div>

Here is an example of a collapsible set with 5 sections.

Non-inset collapsible sets

For full width collapsibles without corner styling add the data-inset="false" attribute to the set.

Mini collapsible sets

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

Custom icons

Collapsible headings’ default icons can be overridden by using the data-collapsed-icon and data-expanded-icon attributes, either at the collapsible-set level or on an individual collapsible basis.

Icon positioning

Collapsible headings’ default icon positioning can be overridden by using the data-iconpos attribute, either at the collapsible-set level or on an individual collapsible basis.

Theming collapsible content

The standard data-theme attribute can be used to set the color of each collapsible in a set. To provide a clearer visual grouping of the content with the headers, add the data-content-theme attribute with a swatch letter. This adds a themed background color and border to the content block. For consistent theming, add these attributes to the parent collapsible set.

1
 
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">

Theming individual sections

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

Expanding or collapsing items in a set

To expand or collapse items in a set, call the respective methods on individual collapsibles. The selector for the collapse method can include multiple items in a set:

1
 
$( "#myCollapsibleSet" ).children().trigger( "collapse" );

Options

collapsedIcon 

Type: String
Default: "plus"
Sets the icon for the headers of the collapsible containers when in a collapsed state.

This option is also exposed as a data attribute: data-collapsed-icon="arrow-r".

Code examples:

Initialize the collapsibleset with the collapsedIcon option specified:

1
2
3
 
$( ".selector" ).collapsibleset({
  collapsedIcon: "arrow-r"
});

Get or set the collapsedIcon option, after initialization:

1
2
3
4
5
 
// Getter
var collapsedIcon = $( ".selector" ).collapsibleset( "option", "collapsedIcon" );
 
// Setter
$( ".selector" ).collapsibleset( "option", "collapsedIcon", "arrow-r" );

corners 

Type: Boolean
Default: true
Applies the theme border-radius to the first and last collapsible if set to true.

This option is also exposed as a data attribute:data-corners="false".

Code examples:

Initialize the collapsibleset with the corners option specified:

1
2
3
 
$( ".selector" ).collapsibleset({
  corners: false
});

Get or set the corners option, after initialization:

1
2
3
4
5
 
// Getter
var corners = $( ".selector" ).collapsibleset( "option", "corners" );
 
// Setter
$( ".selector" ).collapsibleset( "option", "corners", false );

expandedIcon 

Type: String
Default: "minus"
Sets the icon for the header of the collapsible container when in an expanded state.

This option is also exposed as a data attribute: data-expanded-icon="arrow-d".

Code examples:

Initialize the collapsibleset with the expandedIcon option specified:

1
2
3
 
$( ".selector" ).collapsibleset({
  expandedIcon: "arrow-d"
});

Get or set the expandedIcon option, after initialization:

1
2
3
4
5
 
// Getter
var expandedIcon = $( ".selector" ).collapsibleset( "option", "expandedIcon" );
 
// Setter
$( ".selector" ).collapsibleset( "option", "expandedIcon", "arrow-d" );

iconpos 

Type: String
Default: "left"
Positions the icon in the collapsible headers.

Possible values: left, right, top, bottom, none, notext.

This option is also exposed as a data attribute: data-iconpos="right".

Code examples:

Initialize the collapsibleset with the iconpos option specified:

1
2
3
 
$( ".selector" ).collapsibleset({
  iconpos: right
});

Get or set the iconpos option, after initialization:

1
2
3
4
5
 
// Getter
var iconpos = $( ".selector" ).collapsibleset( "option", "iconpos" );
 
// Setter
$( ".selector" ).collapsibleset( "option", "iconpos", right );

initSelector 

Type: CSS selector string
Default: ":jqmData(role='collapsible-set')"
This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as collapsibles. To change which elements are initialized, bind this option to the mobileinit event:
1
2
3
 
$( document ).on( "mobileinit", function() {
    $.mobile.collapsibleset.prototype.options.initSelector = ".mycollapsibleset";
});

inset 

Type: Boolean
Default: true
By setting this option to false the collapsibles will get a full width appearance without corners. If the value is false for an individual collapsible container, but that container is part of a collapsible set, then the value is inherited from the parent collapsible set.

This option is also exposed as a data attribute: data-mini="true".

Code examples:

Initialize the collapsibleset with the inset option specified:

1
2
3
 
$( ".selector" ).collapsibleset({
  inset: false
});

Get or set the inset option, after initialization:

1
2
3
4
5
 
// Getter
var inset = $( ".selector" ).collapsibleset( "option", "inset" );
 
// Setter
$( ".selector" ).collapsibleset( "option", "inset", false );

mini 

Type: Boolean
Default: false
Sets the size of the element to a more compact, mini version. If the value is false for an individual collapsible container, but that container is part of a collapsible set, then the value is inherited from the parent collapsible set.

This option is also exposed as a data attribute: data-inset="false".

Code examples:

Initialize the collapsibleset with the mini option specified:

1
2
3
 
$( ".selector" ).collapsibleset({
  mini: true
});

Get or set the mini option, after initialization:

1
2
3
4
5
 
// Getter
var mini = $( ".selector" ).collapsibleset( "option", "mini" );
 
// Setter
$( ".selector" ).collapsibleset( "option", "mini", true );

theme 

Type: String
Default: null, inherited from parent
Sets the color scheme (swatch) for the collapsible set. It accepts a single letter from a-z that maps to the swatches included in your theme.

Possible values: swatch letter (a-z).

This option is also exposed as a data attribute: data-theme="a".

Code examples:

Initialize the collapsibleset with the theme option specified:

1
2
3
 
$( ".selector" ).collapsibleset({
  theme: "a"
});

Get or set the theme option, after initialization:

1
2
3
4
5
 
// Getter
var theme = $( ".selector" ).collapsibleset( "option", "theme" );
 
// Setter
$( ".selector" ).collapsibleset( "option", "theme", "a" );

Methods

refresh()Returns: jQuery (plugin only)

Updates the collapsible set.

If you manipulate a collapsible set via JavaScript (e.g. add new collapsible containers), you must call the refresh method on it to update the visual styling.

  • This method does not accept any arguments.
Code examples:

Invoke the refresh method:

1
 
$( ".selector" ).collapsibleset( "refresh" );

Events

create( event, ui )Type: collapsiblesetcreate

Triggered when a collapsible set is created

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the collapsibleset with the create callback specified:

1
2
3
 
$( ".selector" ).collapsibleset({
  create: function( event, ui ) {}
});

Bind an event listener to the collapsiblesetcreate event:

1
 
$( ".selector" ).on( "collapsiblesetcreate", function( event, ui ) {} );

Example:

A basic example of a collapsible set.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>collapsibleset demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
 
<div data-role="page" id="page1">
  <div data-role="header">
    <h1>jQuery Mobile Example</h1>
  </div>
  <div data-role="content">
    <div data-role="collapsible-set">
      <div data-role="collapsible" data-collapsed="false">
        <h3>Section A</h3>
        <p>I'm the collapsible set content for section A.</p>
      </div>
      <div data-role="collapsible">
        <h3>Section B</h3>
        <p>I'm the collapsible set content for section B.</p>
      </div>
    </div>
  </div>
</div>
 
</body>
</html>

Demo: