title: How I can I delay the expansion of a collapsible until its content is fetched?
body: <p>I want to integrate a collapsible in my jQM app (1.3.2) that works as follows:</p>
  
  <ol>
  <li>It starts <strong>collapsed</strong>.</li>
  <li>On click it starts to fetch listitems for the collapsible from the server. The <strong>collapsible stays closed</strong>, a load icon may be spinning.</li>
  <li>After all elements are loaded and the listview refreshed and ready, the <strong>collapsible expands</strong>.</li>
  <li>If you click it again, it <strong>closes directly</strong> without delay, and starts from 1.</li>
  </ol>
  
  <p>My initial idea was to grab the <code>expand</code> event and prevent its propagation. When loading is finished I de-register my custom event handler to turn the collapsible back to normal, and finally triggering the expand event from JavaScript to open. </p>
  
  <p>The problem is that this works for the first round, but afterwards the collapsible opens anyway. Consider this example (also in <a href="http://jsfiddle.net/mwil/VG6Gr/" rel="nofollow">jsfiddle</a>):</p>
  
  <pre><code>&lt;div data-role="collapsible" id="c"&gt;
    &lt;h2&gt;Collapse&lt;/h2&gt; 
    &lt;ul data-role="listview" id="lv"&gt;
      &lt;li&gt;You don't see me!&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;a href="#" data-role="button" onClick="$('#c').off('expand', stop)"&gt;
    Unlock the collapsible
  &lt;/a&gt;
  
  &lt;a href="#" data-role="button" onClick="$('#c').on('expand', stop)"&gt;
    Lock the collapsible
  &lt;/a&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var stop = function(event) {
    alert('Locked!');
    event.preventDefault();
  }
  
  // executed after the element is created ...
  $('#c').on('expand', stop)
  </code></pre>
  
  <p>Here, if you click the collapsible after loading, it stays closed (good). When you click unlock, it opens and no alert is shown (good). If you lock it again it shows the alert (good) but opens anyways (bad).</p>
  
  <p>Can anyone enlighten me what I am doing wrong? There seems to be side-effects from unlocking that I cannot see. There are several similar questions here, but most are happy with just preventing the expansion without turning it back on again.</p>
  
  <p>So my question is: <strong>What is the best way to delay the expansion of a collapsible reliably?</strong></p>
  
  <hr>
  
  <p><strong>Edit:</strong> I added another example that integrates the listview logic and also shows this error. <a href="http://jsfiddle.net/mwil/sHaju/" rel="nofollow">jsFiddle is here.</a> I also moved to <code>.one()</code> to make the de-registering more traceable.</p>
  
  <p>New JavaScript:</p>
  
  <pre><code>var stop_n_load = function (event) {
    alert('stop opening! (or at least try to ...)');
  
    // try to stop the expanding by stopping the event
    event.preventDefault();
  
    // Do some work that takes time and trigger expand afterwards ...
    setTimeout(function (e) {
      dd = new Date();
      $('#lv').empty();
      $('#lv').append("&lt;li&gt;&lt;a href='#'&gt;Item A ("+dd+")&lt;/a&gt;&lt;/li&gt;");
      $('#lv').append("&lt;li&gt;&lt;a href='#'&gt;Item B ("+dd+")&lt;/a&gt;&lt;/li&gt;");
      $('#lv').listview('refresh');
  
      // when done, start expanding without this handler (was register only once)
      $('#c').trigger('expand');
      // for the next collapse register stop_n_load again
      $('#c').one('collapse', reset);
    }, 2000);
  };
  
  var reset = function (event) {
    $('#c').one('expand', stop_n_load);
  };
  
  $('#c').one('expand', stop_n_load);
  </code></pre>
  
  <p>On the first expansion it works as expected, it first updates and then opens. On the second run it opens without waiting, you can see the timestamp updating later, so the event is called properly. </p>
  
  <p><em>There seems to be a problem with <code>.preventDefault()</code> I don't understand ...</em></p>