How to dynamically create a JPanel in jquery?
<p>I am trying to use <a href="https://sites.google.com/site/jqpanel/home" rel="nofollow">jPanel</a> for collapsible panel, dynamically from an xml content, but the panels created dynamically does not appear. See the image below</p>

<p><img src="http://i.stack.imgur.com/DmYkT.png" alt="enter image description here"></p>

<p>My container</p>

<pre><code>&lt;div id="detailTable" style="width:100%;"&gt;

&lt;/div&gt;

&lt;!--Creating panels (Same thing if i create manually it is created, see the image)--&gt;
&lt;div title="General Properties" class="class"&gt;
            ad
&lt;/div&gt;
&lt;div title="Other Properties" class="class"&gt;
    ad1
&lt;/div&gt;
</code></pre>

<p>Jquery</p>

<pre><code>$('.class').jPanel({
        'effect'    : 'fade',
        'speed'     : 'slow',
        'easing'    : 'swing'
    });


//when the user clicks on `Server` (left hand side) the below code is triggered
$('#detailTable').empty();
    $('&lt;div&gt;')
    .html('&lt;div class="titleBlue"&gt;Configuration&amp;gt;'+productname+'&amp;gt;Server&lt;/div&gt;'+
            '&lt;div title="General Properties" class="class"&gt;'+  //Creating panels dynamically
                '&lt;table style="border:#2F5882 1px solid;width:100%;"  cellspacing="1" cellpadding="1"&gt;'+
                    '&lt;tbody&gt;'+
                        '&lt;tr&gt;'+
                            '&lt;th style="width:22%" align="left"&gt;Version&lt;/th&gt;'+
                            '&lt;td style="align="left"&gt;'+infa9_pm_version+'&lt;/td&gt;'+
                        '&lt;/tr&gt;'+
                    '&lt;/tbody&gt;'+
                '&lt;/table&gt;'+
            '&lt;/div&gt;'+
            '&lt;div title="Other Properties" class="class"&gt;'+
                '&lt;table style="border:#2F5882 1px solid;width:100%;"  cellspacing="1" cellpadding="1"&gt;'+
                    '&lt;tbody&gt;'+
                        '&lt;tr&gt;'+
                            '&lt;th style="width:22%" align="left"&gt;Home&lt;/th&gt;'+
                            '&lt;td style="align="left"&gt;test&lt;/td&gt;'+
                        '&lt;/tr&gt;'+
                    '&lt;/tbody&gt;'+
                '&lt;/table&gt;'+
            '&lt;/div&gt;')       
    .appendTo('#detailTable');
</code></pre>

<p><strong>Update:</strong></p>

<p>This helped me too</p>

<pre><code>$('#detailTable').empty();
    $('&lt;div&gt;')
    .html('')       
    .appendTo('#detailTable').delay(10).queue(function(){
        $('.class').jPanel({
            'effect'    : 'fade',
            'speed'     : 'slow',
            'easing'    : 'swing'
        });
   });
</code></pre>
