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: jsfiddle.net/DD3Sf . — Gijs
– Gijs, Commented Feb 13, 2012 at 11:55
@gijs Sorry its working now. I think its some cache problem. Thanks for your time — Giri
– Giri, Commented Feb 13, 2012 at 12:10

Sharon · Accepted Answer · 2012-02-13 12:52:19Z

228

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, 2012 at 12:52

Sharon

9197 silver badges7 bronze badges

answered Feb 13, 2012 at 12:01

Razz

4,0151 gold badge20 silver badges15 bronze badges

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

4 Comments

BenR Over a year ago

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");

Joe Maffei Over a year ago

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 }

Abdullah Adeeb Over a year ago

Even though this is the accepted answer but it doesn't reflect what's stated in jquery docs: 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.

Fanky Over a year ago

@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 .displaytypes in css and have one showing function in js. See my answer here: stackoverflow.com/questions/1091322/…

mas-designs · Accepted Answer · 2012-02-13 12:07:57Z

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, 2012 at 12:07

mas-designs

7,5311 gold badge34 silver badges56 bronze badges

2 Comments

Curtis Yallop Over a year ago

Note that jquery show/hide/toggle restores previous display values. So if you hide it with jquery, calling show will work.

JSON Over a year ago

"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?

Yura Loginov · Accepted Answer · 2014-04-17 15:28:13Z

11

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

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

answered Apr 17, 2014 at 15:28

Yura Loginov

7097 silver badges7 bronze badges

Comments

AlexVogel · Accepted Answer · 2013-08-21 11:56:26Z

5

I did that

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

works like a charm.

edited Aug 21, 2013 at 11:56

AlexVogel

10.6k10 gold badges65 silver badges71 bronze badges

answered Aug 21, 2013 at 11:37

user2204545

591 silver badge2 bronze badges

1 Comment

NREZ Over a year ago

Is that an answer or an acknowledgement..?

Boaz · Accepted Answer · 2014-02-12 10:16:35Z

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, 2014 at 10:16

Boaz

20.3k9 gold badges69 silver badges74 bronze badges

answered Sep 5, 2012 at 15:27

user968903

3291 gold badge3 silver badges8 bronze badges

Comments

Carlos · Accepted Answer · 2013-06-12 10:23:50Z

4

try this:

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

answered Jun 12, 2013 at 10:23

Carlos

491 bronze badge

2 Comments

Liam Over a year ago

The show() in this is pointless. This is the same as $('#foo').css('display','inline-block');

JSideris Over a year ago

@Liam Not pointless. You can change the 0 to ease in, or modify this to gain access to other unique show options.

Narek · Accepted Answer · 2012-02-13 11:58:17Z

2

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");
}

answered Feb 13, 2012 at 11:58

Narek

3,8235 gold badges45 silver badges59 bronze badges

Comments

DanielST · Accepted Answer · 2015-04-08 20:04:27Z

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 8, 2015 at 20:04

DanielST

14.2k7 gold badges46 silver badges68 bronze badges

answered Apr 8, 2015 at 19:39

Reza

211 bronze badge

1 Comment

Alexis Wilke Over a year ago

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.

Jon · Accepted Answer · 2016-09-05 10:07:56Z

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 5, 2016 at 10:07

Jon

4244 silver badges7 bronze badges

Comments

yarg · Accepted Answer · 2014-11-18 11:09:07Z

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

GAMITG · Accepted Answer · 2015-09-17 10:35:28Z

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, 2015 at 10:35

GAMITG

3,8187 gold badges35 silver badges51 bronze badges

answered Sep 17, 2015 at 9:41

wuball

1

Comments

ramu · Accepted Answer · 2024-09-01 21:12:11Z

0

add a css property to the element

#tab {
    display:inline-block;
}

in the JS, add and remove "hide" class

$("#" + id).addClass("hide");
$("#" + id).removeClass("hide");

answered Sep 1, 2024 at 21:12

ramu

11 bronze badge

Comments

yuiwer · Accepted Answer · 2013-03-06 11:11:49Z

-5

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

Example:

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

answered Mar 6, 2013 at 11:11

yuiwer

11

3 Comments

Kaan Soral Over a year ago

doesn't this prevent .hide() ?

Brandon Over a year ago

!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.

user1728278 Over a year ago

The important thing to remember about !important is that it's important to not use it.

Collectives™ on Stack Overflow

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

13 Answers 13

4 Comments

2 Comments

Comments

1 Comment

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

4 Comments

2 Comments

Comments

1 Comment

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related