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

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');