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

Question

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

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

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

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

I did that

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

works like a charm.