jquery show/hide when using inline-block

Question

I have some HTML and CSS that looks like this:

<div id="TheContainer">
<div class="MyDivs"></div>
<div class="MyDivs" id="ThisDiv"></div>
</div>

#TheContainer{text-align:center;}
.MyDivs{margin:0px auto;display:inline-block;}
#ThisDiv{display:none;}

I'm using inline-block and margin:0px auto so that the MyDivs are centered within TheContainer. The problem is that when I do this:

$('#TheContainer').children().hide();
$('#ThisDiv').show();

then ThisDiv isn't centered anymore because the display changed from none to block instead of inline-block like I have it in the CSS definition.

I know I could write .css('display','none') and .css('display','inline-block') but I was wondering if there was a way to make this work by keeping .show()

Thanks for your suggestions.

Answer 1

You could make an extension to jQuery...

$.fn.showInlineBlock = function () {
    return this.css('display', 'inline-block');
};

Useage would be:

$('#whatever').showInlineBlock();

jsFiddle Demo