Collapsible Widget

Creates a collapsible block of content. Refer to the jQuery Mobile Collapsible Widget docs for more information.

var content = {};
content['my_collapsible'] = {
  theme: 'collapsible',
  header: 'Hello',
  content: '<p>Hi!</p>'
};
return content;

Now when we click on Hello, the widget will open up:

We can set the data-collapsed attribute to false to have the widget be open by default:

var content = {};
content['my_collapsible'] = {
  theme: 'collapsible',
  header: 'Hello',
  content: '<p>Hi!</p>',
  attributes: {
    'data-collapsed': 'false'
  }
};
return content;

Custom Icons

Try placing these attributes onto your collapsible to change the icons for the expanded and collapsed positions:

'data-collapsed-icon': 'arrow-r',
'data-expanded-icon': 'arrow-d'