CODEWITHSUNDEEP
jquerymobilejquery-mobile
Prasad
Prasad

Reputation: 81

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 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

Upvotes: 8

Views: 20364

Answers (4)

ProbablePrime
ProbablePrime

Reputation: 2489

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

Works with JQM 1.4

Collapsed Option

Upvotes: 9

Chirag Nagpal
Chirag Nagpal

Reputation: 729

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>

Upvotes: 1

Bala
Bala

Reputation: 691

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.

Upvotes: -1

pazur
pazur

Reputation: 151

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');

Upvotes: 15

Related Questions