Question

High everyone,

In my web-based app, I have a div that is usually display:none so that it is hidden and doesn’t take up any space. When something happens, I want the div to appear with the styling for the class ui-state-highlight ui-corner-all and i will put in some dynamic content. So i give this hidden div these classes initially. The problem is when I show the div with some dynamic content, the styling for the classes i just mentioned is not there.

See this fiddle which illustrates the problem: http://jsfiddle.net/qR8gK/

The desired outcome is the div that appears when you click the button has the same styling as the one that is visible initially. Does anyone know how I can do this??

Thanks!

Answer 1

Call the show() method to make it visible.

$('#a').button().click(function() {
    $('#dynamic').html('<p>some dynamic content</p>').show();
});​

working sample : http://jsfiddle.net/qR8gK/16/