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(         


        

Answer 1

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

Example:

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

Answer 2

try this:

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

Answer 3

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.

Answer 4

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

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

Answer 5

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

Answer 6

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.