Dynamically expanding and collapsing the sections in Jquery Mobile Collapsible content

Question

I have created a collapsible content with sections as mentioned below

<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 B.</p>
</div>

<div data-role="collapsible">
<h3>Section B</h3>
<p>I'm the collapsible set content for section B.</p>
</div>

The above block creates a collapsible content with two sections with second section expanded.

I would like to expand the first section expanded and second section as collapsed. Once I perform any action in first section the second section should expand and the first section should be collapsed.

I tried changing the property data-collapsed="true" dynamically but still it doesn't load as expanded.

Can any one help me in fixing this issue or any URL which lists the properties or attributes that can be used along with collapsible content

Answer 1

To simplify code below just assume that first collapsible block has id = 'first' and second has id='second', so use:

$('#blockFirst').trigger('expand');
$('#blockSecond').trigger('collapse');

Answer 2

$("#block").collapsible( "option", "collapsed", false );

Works with JQM 1.4

Collapsed Option