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-05 16:27:15Z

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 5, 2012 at 16:27

answered Sep 5, 2012 at 16:20

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mark Pieszak - Trilon.io Over a year ago

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!

Curtis Yallop Over a year ago

See also stackoverflow.com/questions/9260009/…

Collectives™ on Stack Overflow

jquery show/hide when using inline-block

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related