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.

Mark Pieszak - Trilon.io · Accepted Answer · 2012-09-05T16:27:15.390

7

You could make an extension to jQuery...

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

Useage would be:

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

jsFiddle Demo

edited Sep 05 '12 at 16:27

answered Sep 05 '12 at 16:20

Mark Pieszak - Trilon.io

61,391
14
82
96

Also I believe you could do the same thing just `$.fn.show` to overwrite the default jQuery one, but that might be dangerous in changes certain things to inline-block that shouldn't be! – Mark Pieszak - Trilon.io Sep 05 '12 at 16:42
See also http://stackoverflow.com/questions/9260009/jquery-show-function-display-inline-block-how – Curtis Yallop May 06 '14 at 22:34

jquery show/hide when using inline-block

1 Answers1