Reputation: 103
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
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 >
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