Question

As you may know not long time ago facebook added several new features. One of them was a “New Stories” button which when clicked expands (with what I guess is a slideToggle effect) and shows new stories.

---

Here is the button I am talking about:

---

I would like to know How to achieve same slide / toggle effect and fade in effect that comes in after this button is clicked, with a help of jQuery.

I tried searching for this on internet, but all effects I found were regular slideToggle effects, I mean they started showing div from top and slided down to it’s bottom (here is what I mean by regular content http://jsfiddle.net/TwxB4/), where as one facebook uses starts from the bottom of the hidden div and sort of slides to the top of it. (You will see what I mean if you check it on facebook).

Edit: I am only looking for a slideToggle effect and nothing else, I want to be abble to expand and shrink hidden div when user clicks on the link that lunches the effect.

---

Edit: Here is an illustration of the effect I’m looking for:

Answer 1

This example works the way you described, showing bottom content first:

http://jsfiddle.net/SBLNn/16/

Also full screen view here:

http://jsfiddle.net/SBLNn/16/embedded/result/

They may also do it by having the overflow of the feed hidden, and then setting a negative margin on the inner feed wrapper, then when you click they just animate that negative margin down to 0.