CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Koffer
Koffer

Reputation: 103

Collapse / Expand collapsibles dynamically

I create a little list of jQuery Monile collapsibles. This is the structure:

<div data-role="collapsibleset" data-theme="a" data-content-theme="a">

   <div data-role="collapsible"> 
      Text content
   </div 

  <div data-role="collapsible">
     Text content
   </div >

</div >

How can I open all collapsible elements at once when click a button?

Upvotes: 0

Views: 3630

Answers (1)

ezanker
ezanker

Reputation: 24738

The collapsibleset widget only allows one open collapsible at a time by design. If you want the look of the collapsible set without the behavior, remove the data-role="collapsibleset" and instead add class="ui-collapsible-set":

<div id="theSet" class="ui-collapsible-set" >
   <div data-role="collapsible" > 
       <h3>Title 1</h3>
      Text content 1
   </div> 
   <div data-role="collapsible" >
      <h3>Title 2</h3>
     Text content 2
   </div>
   <div data-role="collapsible" >
      <h3>Title 3</h3>
     Text content 3
   </div >        
</div >

DEMO

UPDATE: to expand all from a button click. Given Expand All and Collapse All buttons as follows:

<div class="ui-grid-a">
  <div class="ui-block-a"><a id="btnExpand" class="ui-btn ui-corner-all collapseExpand">Expand All</a>
  </div>
  <div class="ui-block-b"><a id="btnCollapse" class="ui-btn ui-corner-all collapseExpand">Collapse All</a>
  </div>
</div>

Create a handler for the buttons and user .collapsible("option", "collapsed", true or false); with a selector that returns all collapsibles in the set:

$(document).on("click", ".collapseExpand", function(){
    var collapseAll = this.id == "btnCollapse";
    $('#theSet [data-role="collapsible"]').collapsible("option", "collapsed", collapseAll);
});

Updated DEMO

You might find this article interesting: http://jqmtricks.wordpress.com/2014/04/25/filterable-opens-matching-collapsibles/ as it includes the expand all and collapse all as well as using the filterable widget to open matching collapsibles as you type in a search box.

Upvotes: 1

Related Questions