jQuery - Slide and SlideToggle() Effects

Hey! This is just a quick lesson covering a very popular effect on the internet (utilized through jQuery) known as the "slide" function. All we do is attach an ID to the trigger, and an ID to the Div element which contains the content. A few basic rules, and jQuery takes care of the rest!

Hope this is usefull :)

Category:

Education

Tags:

• jquery
• effects
• effect
• tutorialclarity
• slide
• and
• slidetoggle
• toggle
• function
• syntax
• javascript
• html
• css
• div
• tags

[katsuo11]

Hey man,

First, thank you for the great quick tip tutorial, very nicely done!

I saw something interresting at the far end when you show a previous website you made with the sliding login form.

How did you manage to keep your body page to not slide down when you toggle the login div?

I guess this is a CSS thing, and I would be glad that you explain :)

Thanks, kats

[TutorialClarity]

@katsuo11

Absolutely man, you nailed it. All CSS!

I can't go into great detail on here, but Google key terms such as "CSS Positioning Tutorials" or "CSS Absolute/Relative Positioning".

I placed the Div for the slide-down on my site above all the content, and set the CSS properties to absolute position(positioning which is fixed to the parent document, in my case, the very beginning).

[salman1sa]

man how i can see this i cant see any codes plz ppl dont have great eyes xD

[TutorialClarity]

@salman1sa also, try clicking the arrow next to those tabs. (The cornered arrow in the bottom right).

That should expand that actual video size

[RainyChief]

Did he die?

[SaitebisDamzadeba]

sorry but in ie this does not works :(

[lenglain]

I had figured out how to do this on my own back in July but I've completely forgotten what I did. How do you make the content slide down automatically after a defined delay? For example, I'm making one div slide in from left to right, and then I want the other div to slide down from the first div in timed order by itself...thanks for the tuts and support!

[doubletake1designs]

Hey gram I love your tutorials bro your excellent in explaining stuff, i just wanted to know when are you going to come out with tutorials on php bro

[chad362wiley]

do you still have the source code for e-imagesite?

id be happy to host it for you

[chad362wiley]

@las2good go like

$(''yourcontent).hide();

then do your code below that

[jairj02]

Hola amigo no me funciono, puedes poner el codigo para Descargarlo o Download.

[Deadeesh]

The illusion..! Or not illusion.

[las2good]

maybe a stupid question, but here goes.. When i test, my content is visible to start off with, then when i click the toggle button, my content hides. So it works, but i need to have my content hidden to begin with, and then when toggle is clicked, to reveal my content.

Otherwise, great tutorial!

[taylormac1993]

Hey dawg I LOVE your TuTs. They're so simple to understand and so freaking awesome!

I have a question about jQuery- is jQuesry a program? I just noticed the "load" thing and thought I should probably find out if I need a program that runs all of these program commands