Home > jQuery > Simple Slide Panel Using Jquery and CSS

Simple Slide Panel Using Jquery and CSS

Today I will explain how to create a slide panel jquery effect with an example. Jquery provides various sliding methods such as
  • slideDown()
  • slideUp()
  • slideToggle()

I used slideToggle method to create  jquery slide panel effect.

slideToggle Method:

First we will understand what is this slideToggle Method.

  • As per the name of this method it changes between the slideDown and slideUp methods
  • If the element have been slideDown it changes it will Slide them Up and vice versa.

See the  slideToggle example


I created one div with id ‘slide panel jquery‘.
You can add your own content in this slide panel jquery div.

And for sliding button I created one paragraph with class ‘jquery slide‘.

And I added some CSS stuff as shown below.


And finally to create slide panel jquery simply add below jquery code


The syntax of slideToggle is


It will take two parameters Speed and Callback both are optional

  • Speed parameter can be: “slow”, “fast”, milliseconds.
  • Callback parameter is a function that will execute after the sliding completes.

I hope you understand the slide panel jquery example  tutorial

Here is the  Jquery Slide Panel Demo .

If You have any doubts feel free to contact me.

Thanks for Reading my Post. Please Take a look around My blog,Keep up to date with my Posts..

Wait before leaving. why can’t you follow me on twitter or be a friend on Facebook to get in touch me

Arunkumar Gudelli
I am a Simple Guy, Standing Infront of the World, asking you to Follow Me. Don't miss any posts from Me,Subscribe to the RSS Feed. You can connect me via @twitter or @facebook or Google+ or e-mail.