jqueryshow-hide

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

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.

Solution

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