How to add display:inline-block in a jQuery show() function?

Question

I have some code like this:

function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs a').removeClass("selected");

    var id = obj.attr("rel");
    $('#' + id).show();
    obj.addClass("selected");
}

The show function adds display:block. But I would like to add display:inline-block instead of block.

You'll need to provide some more details. It works for me in a quick test: http://jsfiddle.net/DD3Sf/ . — Gijs, Feb 13 '12 at 11:55
@gijs Sorry its working now. I think its some cache problem. Thanks for your time — Giri, Feb 13 '12 at 12:10

score 227 · Accepted Answer · edited Feb 13 '12 at 12:52

227

Instead of show, try to use CSS to hide and show the content.

function switch_tabs(obj) {
    $('.tab-content').css('display', 'none'); // you could still use `.hide()` here
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#' + id).css('display', 'inline-block');
    obj.addClass("selected");
}

edited Feb 13 '12 at 12:52

Sharon

919
7
7

answered Feb 13 '12 at 12:01

Razz

3,995
1
18
15

101

This might seem obvious, but if you still want to utilize the timing aspect of `show` (`$("#id").show(500)`), just append the `css` function to it: `$("#id").show(500).css("display", "inline-block");` – BenR Nov 12 '13 at 19:19
2

I would take it a step further and take care of all the hiding/showing using CSS classes, not jQuery. ``$('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden');`` In the CSS: ``.hidden { display: none !important }`` – Joe Maffei Jan 26 '17 at 16:57
13

Even though this is the accepted answer but it doesn't reflect what's stated in jquery [docs](http://api.jquery.com/show/): _This is roughly equivalent to calling .css( "display", "block" ), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline._ So to have a default `display` you need to add a class in your css with `display:inline-block;` then call `hide()` and `show()` using the element's id. This is cleaner and more predictable code and easier to style. – Abdullah Adeeb May 11 '17 at 23:29
1

@AbdullahAdeeb the problem is you would need to `hide()` by js on page load. Setting `#element{display:inline-block;display:none;}` doesn't do. I think the cleanest solution is `$('#element').fadeIn().addClass('displaytype');` - better than answer above, because you can set different `.displaytype`s in css and have one showing function in js. See my answer here: https://stackoverflow.com/questions/1091322/how-to-fade-to-display-inline-block/48401910#48401910 – Fanky Jan 23 '18 at 12:44

score 39 · Answer 2 · answered Feb 13 '12 at 12:07

39

Setting the CSS property after you have used .show() should work. Maybe you are targeting the wrong element on your HTML page.

 $('#foo').css('display', 'inline-block');

But if you are not using any effects of .show(), .hide() why don't you set those CSS properties manually like:

$('#foo').css('display','none'); 
$('#foo').css('display','inline-block');

answered Feb 13 '12 at 12:07

mas-designs

7,498
1
31
56

3

Note that jquery show/hide/toggle restores previous display values. So if you hide it with jquery, calling show will work. – Curtis Yallop May 06 '14 at 22:31
"Setting the CSS property after you have used .show() should work." Whats the point of using show() if you are just going to manually update the css anyway? – JSON Sep 19 '17 at 18:25

score 11 · Answer 3 · answered Apr 17 '14 at 15:28

11

Use css() just after show() or fadeIn() like this:

$('div.className').fadeIn().css('display', 'inline-block');

answered Apr 17 '14 at 15:28

Yura Loginov

710
7
7

score 5 · Answer 4 · edited Feb 12 '14 at 10:16

5

Razz's solution would work for the .hide() and .show() methods but would not work for the .toggle() method.

Depending upon the scenario, having a css class .inline_block { display: inline-block; } and calling $(element).toggleClass('inline_block') solves the problem for me.

edited Feb 12 '14 at 10:16

Boaz

19,892
8
62
70

answered Sep 05 '12 at 15:27

user968903

229
1
3
8

score 5 · Answer 5 · edited Aug 21 '13 at 11:56

5

I did that

function showPanels()  {
    $('.panels').show("slow");
    $('.panels').css('display','inline-block');
}

works like a charm.

edited Aug 21 '13 at 11:56

AlexVogel

10,601
10
61
71

answered Aug 21 '13 at 11:37

user2204545

59
1
2

7

Is that an answer or an acknowledgement..? – NREZ Aug 21 '13 at 11:58

score 4 · Answer 6 · answered Jun 12 '13 at 10:23

4

try this:

$('#foo').show(0).css('display','inline-block');

answered Jun 12 '13 at 10:23

Carlos

49
1

The `show()` in this is pointless. This is the same as `$('#foo').css('display','inline-block');` – Liam Jan 19 '15 at 16:27
1

@Liam Not pointless. You can change the 0 to ease in, or modify this to gain access to other unique `show` options. – JSideris Jun 10 '16 at 16:08

score 2 · Answer 7 · edited Apr 08 '15 at 20:04

2

I think you want both the animation and to set the display property at the end. In that case you better use show() callback as shown below

$("#my_obj").show(400,function() {
    $("#my_obj").css("display","inline-block")
}) ;

This way you will achieve both the results.

edited Apr 08 '15 at 20:04

DanielST

13,783
7
42
65

answered Apr 08 '15 at 19:39

Reza

21
1

This is not correct, you'd end up with the `inline-block` mode only after the whole animation ran. That means it would "pop" between `block` and `inline-block` after the 400ms. – Alexis Wilke Mar 13 '17 at 07:22

score 2 · Answer 8 · answered Sep 05 '16 at 10:07

2

<style>
.demo-ele{display:inline-block}
</style>

<div class="demo-ele" style="display:none">...</div>

<script>
$(".demo-ele").show(1000);//hide first, show with inline-block
<script>

answered Sep 05 '16 at 10:07

Jon

404
3
6

score 2 · Answer 9 · answered Feb 13 '12 at 11:58

You can use animate insted of show/hide

Something like this:

function switch_tabs(obj)
{
    $('.tab-content').animate({opacity:0},3000);
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#'+id).animate({opacity:1},3000);
    obj.addClass("selected");
}

score 1 · Answer 10 · answered Nov 18 '14 at 11:09

actually jQuery simply clears the value of the 'display' property, and doesn't set it to 'block' (see internal implementation of jQuery.showHide()) -

   function showHide(elements, show) {
    var display, elem, hidden,

...

         if (show) {
            // Reset the inline display of this element to learn if it is
            // being hidden by cascaded rules or not
            if (!values[index] && display === "none") {
                elem.style.display = "";
            }

...

        if (!show || elem.style.display === "none" || elem.style.display === "") {
            elem.style.display = show ? values[index] || "" : "none";
        }
    }

Please note that you can override $.fn.show()/$.fn.hide(); storing original display in element itself when hiding (e.g. as an attribute or in the $.data()); and then applying it back again when showing.

Also, using css important! will probably not work here - since setting a style inline is usually stronger than any other rule

score 0 · Answer 11 · edited Sep 17 '15 at 10:35

0

The best .let it's parent display :inline-block or add a parent div what CSS only have display :inline-block.

edited Sep 17 '15 at 10:35

GAMITG

3,810
7
32
51

answered Sep 17 '15 at 09:41

wuball

1

score -5 · Answer 12 · answered Mar 06 '13 at 11:11

-5

Best way is to add !important suffix to the selector .

Example:

 #selector{
     display: inline-block !important;                   
}

answered Mar 06 '13 at 11:11

yuiwer

11

3

doesn't this prevent .hide() ? – Kaan Soral Mar 09 '13 at 14:42
!important is only necessary in edge cases when there is no other option. Not the right way to approach this problem in my opinion when it can be fixed with better jQuery code. – Brandon Apr 09 '13 at 17:27
6

The *important* thing to remember about `!important` is that it's *important* to not use it. – user1728278 Aug 14 '13 at 14:37

How to add display:inline-block in a jQuery show() function?

12 Answers12

Linked

Related