Question

How can I show an item with jQuery, using slideToggle, fadeIn, or a similar function, that is initially hidden and also uses a css attribute besides display:block? I know I can add style="display:none" in the html and style the css as I’d like it when visible, but is there a way that uses only css? Or a another way that has advantages? Having to use this technique to “trick” jQuery into using display:inline when it shows the element is not intuitive and might be hard to debug later. Here is an example using the trick (I am keeping both divs inline, even after the second is displayed).

jsFiddle

<div id="a">hello</div>
<div id="b" style="display:none">world</div>
<button>show world</button>​

js:

$("button").click(function(){
    $("#b").fadeIn();
});​

css:

div{
   display:inline;    
}​

Answer 1

Thanks to the other answerers, but after some more research I think I’ve found an answer that’s slightly cleaner. Just modify the fadeIn statement with a call to css(display:whatever) in order to modify the outcome. Since fadeIn and the other jQuery effects are asynchronous, it shouldn’t cause any graphical glitches. With this method, the css only affects initial styling, there are no style attributes in the html, and the intent and effect of the jQuery statement is obvious. Thanks to jQuery forum user godsbest for the idea.

jsFiddle

<div id="a">hello</div>
<div id="b">world</div>
<button>show world</button>​

js:

$("button").click(function(){
    $("#b").fadeIn().css("display","inline");
});​

css:

#a{
   display:inline;    
}
#b{
   display:none;        
}