Dynamically expand and collapse sections in jQuery Mobile Collapsible content

Question

I created collapsible content with sections as follows

<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 folded content with two sections with an extended section.

I would like to expand the first section, the extended and the second section, as collapsed. As soon as I perform any action in the first section, the second section should expand, and the first part should be collapsed.

I tried to change these properties - collapsed = "true" dynamically, but it does not load as advanced.

Can someone help me fix this issue or any url that lists properties or attributes that can be used with legible content

Answer 1

To simplify the code below, suppose the first collapsible block has id = 'first' and the second has id = 'second', so use:

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

Answer 2

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

Works with JQM 1.4

Minimized option

Answer 3

jQuery Mobile will visually stylize the collapse set as a group and make the set the same as the accordion, in that only one reset can be opened at a time if you wrap the collapses 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> 

Answer 4

Remove "first-collapsed =" false "from the first section and add data-collapsed =" true "to the second section. You do not need to make any changes dynamically. This above will work as you wish.