How to dynamically create a JPanel in jquery?

Question

I am trying to use jPanel for collapsible panel, dynamically from an xml content, but the panels created dynamically does not appear. See the image below

My container

<div id="detailTable" style="width:100%;">

</div>

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

Jquery

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


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

Update:

This helped me too

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

Answer 1

You can do the following to have the panels initiated after the dynamic content as long as the dynamic content is not generated by ajax or a call back(In such cases initiate jPanel method at the ajax success or the callback method). here selector being the class or id you use for panel i will not prefer using delay and queue as there purpose are entireley different

$('#detailTable').empty();
$('<div>')
.html('')       
.appendTo('#detailTable').find('selector').jPanel({
        'effect'    : 'fade',
        'speed'     : 'slow',
        'easing'    : 'swing'
    });

I will try to implement a default handler for these scenarios in the next jPanel release.

Answer 2

As you are appending the content dynamically, you should use JQuery live.

Prototype to associate the jpanel to the class on click -

$('.class').live('click', function(){
    $(this).jPanel({
        'effect'    : 'fade',
        'speed'     : 'slow',
        'easing'    : 'swing'
    });.focus();
    $(this).removeClass('class');
});

To trigger programmatically use JQuery trigger.

$('.class').trigger('click');