Dynamically adding collapsible elements

Question

Source: http://jquerymobile.com/demos/1.0a2/#docs/content/content-collapsible.html When I add an element like this manually to my code, it is displayed properly. But when I try to add it with jQuery like this:

$('body').append('<div data-role="collapsible"><h3>Title</h3><p>Content</p></div>');

It just displays title in h3 and the content below it, so not as a collapsible element. How can I fix this?

Answer 1

The easiest way to achieve this is to call the collapsible() method on the dynamically created divs:

$('div[data-role=collapsible]').collapsible();

source : http://forum.jquery.com/topic/dynamically-add-collapsible-div

Answer 2

this is what i do. Hope it helps

HTML

<div id="collapsibleSet" data-role="collapsible-set">
   <div id="ranking1"></div>
</div>

Javascript

$('#ranking1').replaceWith('<div id="ranking1" data-role="collapsible" data-collapsed="false">' + htmlRankings(ranking) + '</div>');
$('#collapsibleSet').find('div[data-role=collapsible]').collapsible({refresh:true});

htmlRankings() is a js function that returns some html that i want inside the collapsible div. it can be something like this

<h3>11</h3>
<span>test</span>