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

User · Accepted Answer

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

User · Answer

Best way is to add  important suffix to the selector    Example     selector       display  inline-block  important

User · Answer

lt style gt   demo-ele display inline-block   lt  style gt    lt div class  demo-ele  style  display none  gt     lt  div gt    lt script gt      demo-ele   show 1000    hide first  show with inline-block  lt script gt

User · Answer

Use css   just after show   or fadeIn   like this      div className   fadeIn   css  display    inline-block

User · Answer

I did that  function showPanels              panels   show  slow            panels   css  display   inline-block        works like a charm

User · Answer

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

User · Answer

try this       foo   show 0  css  display   inline-block

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to jquery

Examples related to show-hide