title: jquery mobile nested collapsible
body: <p>I am adding dynamic content to a collapsible div.  When it is added, the div is collapsed but the added content is outside the div.  Using javascript console in chrome, I see the div is closed before the new content is added.  Code is below:'</p>
  
  <pre><code>&lt;div data-role="collapsible" id="sendmessTMlist" data-collapsed="true"&gt;
          &lt;h3&gt;Select A Message&lt;/h3&gt;
                  &lt;div data-role="collapsible" id="mymessages"&gt;
                  &lt;h3&gt;My Messages&lt;/h3&gt;
                  &lt;div data-role="content"&gt;My Message1&lt;BR&gt;
                  &lt;input data-inline="true" data-role="button" id="messageid" type="button" value="Insert" class="buttlink" /&gt;
                  &lt;/div&gt;
                  &lt;/cfoutput&gt;
             &lt;/div&gt;
  </code></pre>
  
  <p>Here is the jquery code I use to add the content:</p>
  
  <pre><code>$("#mymessages").append('&lt;div data-role="content"&gt;'+data.message+'&lt;BR&gt;&lt;input data-inline="true" data-role="button" id="'+data.message+'" type="button" value="Insert" class="buttlink" /&gt;&lt;/div&gt;').trigger("create");
  </code></pre>
  
  <p><code>$("Selector").find('div[data-role=collapsible]').collapsible();</code></p>
  
  <p>I have tried many different combinations of code, the above is what's left of the last pass.</p>
  
  <p>What is missing in my javascript to put that inside the collapsible?</p>