Why my elements shows without style? - json

Question

I recently start to create an application with phonegap and jquery mobile that loads a json an create a elements this is my code.
<script type="text/javascript">
$(document).ready(function(){
$("#boton").click(function(){
$.getJSON("json url",function(data){
var instrucciones = data.Instrucciones;
document.getElementById("titulos").innerHTML = instrucciones;
var acordeonJSON = $('<div data-role="collapsible" id="accordeon"><h3>hi</h3><p>Hello</p></div>');
$.each(data.Items,function(llave,valor){
if(valor.nombreItem !="")
{
$("#accordeon").append(acordeonJSON);
}
});
});//Llave getJSON
});//Llave boton click
});
</script>
This is my Html structure
<div data-role="page" id="home">
<div data-role="header" id="titulo">
<h1 id="titulos"></h1>
</div>
<div data-role="main" class="ui-content" id="div1">
<button id="boton">Presioname</button>
<div id="instrucciones"></div>
<div data-role="collapsible-set" data-theme="c" id="accordeon">
<!--In this part i want to show the content of my json-->
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
My question is why i cant create my elements in jquery, the created elements shows without style.

Answer 1

After appending all the new dom elements within the collapsibleset, call $("#accordeon").collapsibleset( "refresh" ).enhanceWithin();
For example:
$("#boton").click(function(){
var acordeonJSON = $('<div data-role="collapsible" id="accordeon1"><h3>hi</h3><p>Hello</p></div>');
$("#accordeon").append(acordeonJSON).collapsibleset("refresh").enhanceWithin();
});
Here is a DEMO