How to make collapsible checkboxes with jquery mobile? - jquery-mobile

Question

I want to group certain checkboxes and make them collapsible as well as select/unselect all.
HTML
<div style="padding-left: 5px; padding-right: 5px">
<fieldset data-role="controlgroup">
<input autocomplete="off" type="checkbox" name="layers" id="land" class="layers" checked="checked"/>
<label for="land">Land Parcels</label>
<input autocomplete="off" type="checkbox" name="layers" id="road" class="layers" checked="checked"/>
<label for="road">Roads</label>
<input autocomplete="off" type="checkbox" name="layers" id="rail" class="layers" checked="checked"/>
<label for="rail">Railroads</label>
input autocomplete="off" type="checkbox" name="layers" id="lake" class="layers" checked="checked"/>
<label for="lake">Lakes</label>
<input autocomplete="off" type="checkbox" name="layers" id="points" class="layers"/>
<label for="points">AMIS Points</label>
<input autocomplete="off" type="checkbox" name="education" id="education" class="layers"/>
<label for="education">Education</label>
<input autocomplete="off" type="checkbox" data-mini="true" name="education" id="childcare" class="layers"/>
<label for="childcare">Child Care</label>
<input autocomplete="off" type="checkbox" data-mini="true" name="education" id="highschool" class="layers"/>
<label for="highschool">High School</label>
<input autocomplete="off" type="checkbox" name="layers" id="stormpipes" class="layers"/>
<label for="stormpipes">Storm Pipes</label>
</fieldset>
</div>
JQuery
$(document).ready(function () {
fixContentHeight();
$('.layers').click(changeLayers);
});
function changeLayers () {
var checked = [];
$('.layers').each(function () {
if ($(this).attr('checked')) {
checked.push($(this).attr('value'));
}
});
mainLayer.params.LAYERS = checked.join(",");
mainLayer.redraw();
}
$('#education').click(function() {
$("INPUT[type='checkbox']").attr('checked', $('#education').is(':checked'));
});
Trying to make child care and high school collapisble within the education checkbox.

Answer 1

You could use an unordered list with data-role="listview", add data-role="collapsible" to the li elements, and nest another unordered list with each checkbox inside the inner list's li
<ul data-role="listview">
<li data-role="collapsible">
<h3>Title of collapsible row</h3>
<ul data-role="listview">
<li>
<input autocomplete="off" type="checkbox" name="layers" id="land" class="layers" checked="checked"/>
<label for="land">Land Parcels</label>
</li>
<li>
<input autocomplete="off" type="checkbox" name="layers" id="road" class="layers" checked="checked"/>
<label for="road">Roads</label>
</li>
</ul>
</li>
</ul>
The margins and paddings will look a bit weird, but you can just tweak the css to fix that