JQuery show or hide effect

I tried to do a slide open effect but I couldn't. At last I found this but I couldn't integrate to my page. Please help.

This works the way I want: http://jsfiddle.net/Hftpc/17/

This is my attempt: http://jsfiddle.net/LGU8E/

edit: You said I don't understand what do you want? I will explain detailed: Did you see this? : http://jsfiddle.net/Hftpc/17/ I want to do this for my page: http://jsfiddle.net/LGU8E/ while My mouse is on quickstartdiv, this effect (I give it:http://jsfiddle.net/LGU8E/) runs and visible开发者_运维技巧panel div opens like this=http://jsfiddle.net/LGU8E/ but not vertical, it is horizontal.. I hope I can explain it..

Your fiddle requires some work to make it pure HTML and appropriate javascript. First, you need to use jQuery and jQuery UI (for the animations) instead of MooTools. Second, you can't use ASP tags in the fiddle, you need to convert that to HTML. You don't need the document ready handler, as jsFiddle allows you to specify that in the options (onDomReady is what I chose). I also had some problems with your CSS since it isn't designed to work in the fiddle environment -- your absolute positioning moves things outside the display area. After a bit of tweaking, I came up with this fiddle, which seems to work the way you want it. You'll just have to adjust the CSS (and HTML) to fit.

It requires jQuery and jQuery UI to run those animations,

Updated

[Edit] I still have no idea what you are trying to do, if you want it to open vertically, change that "horizontal" keyword to "vertical". If you want to do something else, tell us what that is.