Dynamically expanding and collapsing the sections in Jquery Mobile Collapsible content
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 collapsib开发者_运维技巧le 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
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');
$("#block").collapsible( "option", "collapsed", false );
Works with JQM 1.4
Collapsed Option
jQuery Mobile will visually style a set of collapsibles as a group and will make the set behave like an accordion in that only one collapsible can be open at a time if you wrap the collapsibles in a div that has the attribute data-role="collapsibleset".
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsibleset content for section 1. My content is initially visible.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsibleset content for section 2.</p>
</div>
</div>
Remove "data-collapsed="false" from first section and add data-collapsed="true" to the second section. You don't have to make any changes dynamically. That above change will work as required by you.
精彩评论