Collapsible Widget

Categories: Widgets

Collapsible Widgetversion added: 1.0

Description: Creates a collapsible block of content

QuickNavExamples

Options

Methods

Events

To create a collapsible block of content, create a container and add the data-role="collapsible" attribute. Using data-content-theme attribute allows you to set a theme for the content of the collapsible.

Directly inside this container, add any header (H1-H6) or legend element. The 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 you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.

By default, the content will be collapsed.

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

This code will create a collapsible widget like this:

Expanding collapsibles on load

To expand the content when the page loads, add the data-collapsed="false" attribute to the wrapper.

1
 
<div data-role="collapsible" data-collapsed="false">

This code will create a collapsible widget like this:

Non-inset collapsibles

By default collapsibles have an inset appearance. To make them full width without corner styling add the data-inset="false" attribute to the element.

1
 
<div data-role="collapsible" data-inset="false">

This code will create a non-inset collapsible:

Mini collapsibles

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

1
 
<div data-role="collapsible" data-mini="true">

This code will create a mini collapsible widget:

Custom icons

Collapsible headings’ default icons can be overridden by using the data-collapsed-icon and data-expanded-icon attributes. In the below case, data-collapsed-icon="arrow-r" and data-expanded-icon="arrow-d".

Icon positioning

Collapsible headings’ default icon positioning can be overridden by using the data-iconpos attribute. In the below case, data-iconpos="right".

Theming collapsible content

Collapsible content is minimally styled - we add only a bit of margin between the bar and content, and the header adopts the default theme styles of the container it sits within.

To provide a stronger visual connection between the collapsible header and content, add the data-content-theme attribute to the wrapper and specify a theme swatch letter. This will apply the swatch's border and flat background color (not the gradient) to the content block and changes the corner rounding to square off the bottom of the header and round the bottom of the content block instead to visually group these elements.

1
2
3
4
 
<div data-role="collapsible" data-content-theme="c">
  <h3>Header</h3>
  <p>I'm the collapsible content with a themed content block set to "c".</p>
</div>

Theming collapsible headers

To set the theme on a collapsible header button, add the data-theme attribute to the wrapper and specify a swatch letter. Note that you can mix and match swatch letters between the header and content with these theme attributes.

1
2
3
4
 
<div data-role="collapsible" data-theme="a" data-content-theme="a">
  <h3>Header swatch A</h3>
  <p>I'm the collapsible content with a themed content block set to "a".</p>
</div>

Nested Collapsibles

Collapsibles can be nested inside each other if needed. In this example, we're setting the content theme to provide clearer visual connection between the levels.

Collapsible sets (accordions)

It's possible to combine multiple collapsibles into a grouped set that acts like an accordion widget.

Options

collapseCueText 

Type: String
Default: " click to collapse contents"
This text is used to provide audible feedback for users with screen reader software.

This option is also exposed as a data attribute: data-collapse-cue-text=" collapse with a click".

Code examples:

Initialize the collapsible with the collapseCueText option specified:

1
2
3
 
$( ".selector" ).collapsible({
  collapseCueText: " collapse with a click"
});

Get or set the collapseCueText option, after initialization:

1
2
3
4
5
 
// Getter
var collapseCueText = $( ".selector" ).collapsible( "option", "collapseCueText" );
 
// Setter
$( ".selector" ).collapsible( "option", "collapseCueText", " collapse with a click" );

collapsed 

Type: Boolean
Default: true
When false, the container is initially expanded with a minus icon in the header.

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

Code examples:

Initialize the collapsible with the collapsed option specified:

1
2
3
 
$( ".selector" ).collapsible({
  collapsed: false
});

Get or set the collapsed option, after initialization:

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

collapsedIcon 

Type: String or Boolean
Default: "plus"
Sets the icon for the header of the collapsible container when in a collapsed state.

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

Multiple types supported:
  • String: The name of the icon you wish to use.
  • Boolean: In addition to an icon name, you can also set this option to false. In that case, the collapsible will not have an icon in either the expanded or collapsed state. Add data-collapsed-icon="false" to the collapsible widget to set the option to false via the data attribute.
Code examples:

Initialize the collapsible with the collapsedIcon option specified:

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

Get or set the collapsedIcon option, after initialization:

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

corners 

Type: Boolean
Default: true
Applies the theme border-radius if set to true.

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

Code examples:

Initialize the collapsible with the corners option specified:

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

Get or set the corners option, after initialization:

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

expandCueText 

Type: String
Default: " click to expand contents"
This text is used to provide audible feedback for users with screen reader software.

This option is also exposed as a data attribute: data-expand-cue-text=" expand with a click".

Code examples:

Initialize the collapsible with the expandCueText option specified:

1
2
3
 
$( ".selector" ).collapsible({
  expandCueText: " expand with a click"
});

Get or set the expandCueText option, after initialization:

1
2
3
4
5
 
// Getter
var expandCueText = $( ".selector" ).collapsible( "option", "expandCueText" );
 
// Setter
$( ".selector" ).collapsible( "option", "expandCueText", " expand with a click" );

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 collapsible with the expandedIcon option specified:

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

Get or set the expandedIcon option, after initialization:

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

heading 

Type: String
Default: "h1,h2,h3,h4,h5,h6,legend"
Within the collapsible container, the first immediate child element that matches this selector will be used as the header for the collapsible.
Code examples:

Initialize the collapsible with the heading option specified:

1
2
3
 
$( ".selector" ).collapsible({
  heading: ".mycollapsibleheading"
});

Get or set the heading option, after initialization:

1
2
3
4
5
 
// Getter
var heading = $( ".selector" ).collapsible( "option", "heading" );
 
// Setter
$( ".selector" ).collapsible( "option", "heading", ".mycollapsibleheading" );

iconpos 

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

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

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

Code examples:

Initialize the collapsible with the iconpos option specified:

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

Get or set the iconpos option, after initialization:

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

initSelector 

Type: CSS selector string
Default: ":jqmData(role='collapsible')"
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.collapsible.prototype.options.initSelector = ".mycollapsible";
});

inset 

Type: Boolean
Default: true
By setting this option to false the element 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-inset="false".

Code examples:

Initialize the collapsible with the inset option specified:

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

Get or set the inset option, after initialization:

1
2
3
4
5
 
// Getter
var inset = $( ".selector" ).collapsible( "option", "inset" );
 
// Setter
$( ".selector" ).collapsible( "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-mini="true".

Code examples:

Initialize the collapsible with the mini option specified:

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

Get or set the mini option, after initialization:

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

theme 

Type: String
Default: null, inherited from parent
Sets the color scheme (swatch) for the collapsible. 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 collapsible with the theme option specified:

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

Get or set the theme option, after initialization:

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

Methods

Events

collapse( event, ui )Type: collapsiblecollapse

Triggered when a collapsible is collapsed

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

Code examples:

Initialize the collapsible with the collapse callback specified:

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

Bind an event listener to the collapsiblecollapse event:

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

create( event, ui )Type: collapsiblecreate

Triggered when a collapsible is created

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

Code examples:

Initialize the collapsible with the create callback specified:

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

Bind an event listener to the collapsiblecreate event:

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

expand( event, ui )Type: collapsibleexpand

Triggered when a collapsible is expanded

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

Code examples:

Initialize the collapsible with the expand callback specified:

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

Bind an event listener to the collapsibleexpand event:

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

Example:

A basic example of a collapsible content block.

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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>collapsible 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">
      <h3>I'm a header</h3>
      <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
    </div>
  </div>
</div>
 
</body>
</html>

Demo: