jquery ui css does not appear when changes from display:none to display:inline

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/

Answer 2

Just use .show() instead of manually setting the css display setting.

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

Answer 3

The actual problem in your code was because of the paragraph tag. Remove the <p> and try.

$('#a').button().click(function() {
    $('#dynamic').css('display', 'inline').html('some dynamic content');
});​

sample : http://jsfiddle.net/qR8gK/19/