Anyway to programmatically hide a jQuery UI button?

Question

I'd like to do something like this, with jQuery UI Button:

$button.button();
// ...
$button.button('hide');
// ...
$button.button('show');

Similar to how enable/disable works. Hiding and showing the button manually ($button.hide(); $button.show();) is resulting in some really screwy formatting with the jQuery UI CSS...

Am I missing something simple here?

Answer 1

Just doing the standard $button.hide() should do the job fine, what exactly is it screwing up?

You could do $button.css('display', 'none') but this is all that $button.hide() does anyway.

I'm pretty sure there isn't a way to do what you ask, and even if there would it only set display: none like the methods I just mentioned. You might be better of figuring out why setting display none is screwing up your CSS elsewhere on the page.

Answer 2

If you use the style visibility instead of display the button should be able to create properly. The visibility: hidden style just makes the element invisible; the display: none style which $.hide() uses actually removes the element from the rendered DOM.

So in short try:

var newButton = $('a#some-button.hidden');

// Hide element, but allow it to use render space
newButton.attr('visibility', 'hidden');
newButton.attr('display', 'block');

// Create button
newButton.button();

// Revert element to the "normal" means of hiding (may be unnecessary)
newButton.attr('display', 'none');
newButton.attr('visibility', 'visible');

// Show button
newButton.show();

I've had to do this a few time before.