jQM 1.4 collapsibleset max num collapsibles

by foalea

HTML

<div data-role="page" id="page1">
  <div data-role="header" data-position="fixed" data-tap-toggle="false">
    <h1>My page</h1>
  </div>
  <div role="main" class="ui-content">
    <button type="button" data-icon="gear" data-iconpos="right" data-mini="true" data-inline="true" id="add">Add</button>
    <div data-role="collapsibleset" data-content-theme="a" data-iconpos="right" id="set">
      <div data-role="collapsible" id="set1" data-collapsed="true">
        <h3>Section 1</h3>
        <p>I'm the collapsible content.</p>
      </div>
    </div>
  </div>
</div>

JavaScript

$(document).on("pagecreate", function() {
  var nextId = 1;
  $("#add").click(function() {
    var curNumOfDivs = $('#set [data-role="collapsible"]').length;
    if (curNumOfDivs > 4) {
      alert("You have exceeded tha max allowed collapsibles!");
      return false;
    }
    nextId++;
    var content = "<div data-role='collapsible' id='set" + nextId + "'><h3>Section " + nextId + "</h3><p>I am the collapsible content in a set so this feels like an accordion. I am hidden by default because I have the 'collapsed' state; you need to expand the header to see me.</p></div>";
    $("#set").append(content).collapsibleset("refresh");
  });
  $("#expand").click(function() {
    $("#set").children(":last").collapsible("expand");
  });
  $("#collapse").click(function() {
    $("#set").children(":last").collapsible("collapse");
  });
});