How to create a div toggle effect using jQuery?

Question

I want the following requirement. But there is slight change on it.

http://acrisdesign.com/demo/toggle/

Please consider the above link for the example below.

There are two toggle effects on Hover and Click.

My requirement when someone click on the top of the div: it will expand and there should be a "close" button in the div some on mouse over to this image or click the div will closed. When someone mouse hover the link it will expand.

  First time click expand when mouse over the link collapse. 

There are toggle links "click here". When someone click on the link it will create a space between each other, but my requirement to it display top of the three link "click here".

Answer 1

Try Accordion

Example one

Example 2

Example 3

Answer 2

Something that I have found very useful is the .toggleClass() function in jQueryUI

http://jqueryui.com/demos/toggleClass/