title: How to make collapsible checkboxes with jquery mobile?
body: <p>I want to group certain checkboxes and make them collapsible as well as select/unselect all.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div style="padding-left: 5px; padding-right: 5px"&gt;
   &lt;fieldset data-role="controlgroup"&gt; 
    &lt;input autocomplete="off" type="checkbox" name="layers" id="land" class="layers" checked="checked"/&gt;
    &lt;label for="land"&gt;Land Parcels&lt;/label&gt; 
    &lt;input autocomplete="off" type="checkbox" name="layers" id="road" class="layers" checked="checked"/&gt;
    &lt;label for="road"&gt;Roads&lt;/label&gt; 
    &lt;input autocomplete="off" type="checkbox" name="layers" id="rail"  class="layers" checked="checked"/&gt;
    &lt;label for="rail"&gt;Railroads&lt;/label&gt; 
  input autocomplete="off" type="checkbox" name="layers" id="lake"  class="layers" checked="checked"/&gt;
    &lt;label for="lake"&gt;Lakes&lt;/label&gt;
    &lt;input autocomplete="off" type="checkbox" name="layers" id="points" class="layers"/&gt;
    &lt;label for="points"&gt;AMIS Points&lt;/label&gt;
    &lt;input autocomplete="off" type="checkbox" name="education" id="education" class="layers"/&gt;
    &lt;label for="education"&gt;Education&lt;/label&gt;
      &lt;input autocomplete="off" type="checkbox" data-mini="true" name="education" id="childcare" class="layers"/&gt;
      &lt;label for="childcare"&gt;Child Care&lt;/label&gt;
      &lt;input autocomplete="off" type="checkbox" data-mini="true" name="education" id="highschool" class="layers"/&gt;
      &lt;label for="highschool"&gt;High School&lt;/label&gt;
      &lt;input autocomplete="off" type="checkbox" name="layers" id="stormpipes" class="layers"/&gt;
    &lt;label for="stormpipes"&gt;Storm Pipes&lt;/label&gt;
   &lt;/fieldset&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>$(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'));
  });
  </code></pre>
  
  <p>Trying to make child care and high school collapisble within the education checkbox. </p>