JQuery: Where To Add .slideDown( )? To This?

[enwise]

I'm trying to add slideDown to http://jsfiddle.net/Jk59f/ so that it slides down smoothly if the dark area is not expanded and just refreshes the link if it is clicked or another link is clicked.

I haven't been able to figure it out though after testing multiple areas.. it just doesnt slide at all it just jumps!

How do I do this?

[sdleihssirhc]

The slideDown method only works when an element has display: none. So the following will do nothing:

<p>hello, world</p>
<script>
$('p').slideDown();
</script>

But if you hide the element first, it suddenly works:

<p>hello, world</p>
<script>
$('p').hide().slideDown();
</script>

One of the most frustrating parts of the slideDown docs (and the jQuery docs in general) is that they don't mention this requirement ;_;

As far as where to put it, it can be anywhere after you insert the contentTobeLoaded HTML into the #ajax <div>. Of course, you'll still have to tinker with it, because there's an unsightly jump after the content is inserted and hidden, but before it actually slides...

EDIT

Ah, you changed it so that the last sentence is actually moot. Good job! All you need to do is add the hide/slideDown calls and you're good.

[enwise]

The slideDown method only works when an element has display: none. So the following will do nothing:

<p>hello, world</p>
<script>
$('p').slideDown();
</script>

But if you hide the element first, it suddenly works:

<p>hello, world</p>
<script>
$('p').hide().slideDown();
</script>

One of the most frustrating parts of the slideDown docs (and the jQuery docs in general) is that they don't mention this requirement ;_;

As far as where to put it, it can be anywhere after you insert the contentTobeLoaded HTML into the #ajax <div>. Of course, you'll still have to tinker with it, because there's an unsightly jump after the content is inserted and hidden, but before it actually slides...

EDIT

Ah, you changed it so that the last sentence is actually moot. Good job! All you need to do is add the hide/slideDown calls and you're good.

http://jsfiddle.net/3NdcE/

did i place the slideDown in the wrong place?

[sdleihssirhc]

did i place the slideDown in the wrong place?

Nope, but you did forget to hide the element, first. Like this:

$('#ajax').html(contentTobeLoaded).hide().slideDown(1000)....

[enwise]

Nope, but you did forget to hide the element, first. Like this:

$('#ajax').html(contentTobeLoaded).hide().slideDown(1000)....

Ohh I see! you said

The slideDown method only works when an element has display: none

so is display: none and .hide() the same?

[sdleihssirhc]

so is display: none and .hide() the same?

Mostly. There's some special stuff that .hide() can do (if you give it a speed, then it animates the hiding; it makes sure to save what the old display was), but it ultimately sets each element's display to none.

[enwise]

Mostly. There's some special stuff that .hide() can do (if you give it a speed, then it animates the hiding; it makes sure to save what the old display was), but it ultimately sets each element's display to none.

Thx for the help so far! I'm still very new to Javascript/JQuery but I am learning alot. I tried to add some more to it so it slides down if there is nothing displayed, and if there is something it will just fade out and in instead of sliding down again. http://jsfiddle.net/XwYKA/ but for some reason when I added the if/else statements the slide down stopped working. Is this the wrong way to use if/else?