CODEWITHSUNDEEP
jqueryshow-hide
Giri
Giri

Reputation: 4909

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.

Upvotes: 173

Views: 211288

Answers (13)

ramu
ramu

Reputation: 1

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

Upvotes: 0

Jon
Jon

Reputation: 424

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

Upvotes: 2

wuball
wuball

Reputation: 1

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

Upvotes: 0

Reza
Reza

Reputation: 21

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.

Upvotes: 2

yarg
yarg

Reputation: 709

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

Upvotes: 1

Yura Loginov
Yura Loginov

Reputation: 710

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

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

Upvotes: 11

user968903
user968903

Reputation: 329

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.

Upvotes: 5

user2204545
user2204545

Reputation: 59

I did that

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

works like a charm.

Upvotes: 5

Carlos
Carlos

Reputation: 49

try this:

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

Upvotes: 4

yuiwer
yuiwer

Reputation: 11

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

Example:

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

Upvotes: -5

Razz
Razz

Reputation: 4015

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

Upvotes: 228

mas-designs
mas-designs

Reputation: 7546

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

Upvotes: 39

Narek
Narek

Reputation: 3823

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

Upvotes: 2

Related Questions