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

<!doctype html>
<html> 
<head> 
<style></style>
 <script></script>
 </head> <body> 
<div id="panel"> 
<img style="float:left; "src="welcome-to-my-blog.jpg" align="center" height="100%"/>
< br/><br/>
<p><i><h1>Put your own content here</h1></i></p>
 </div> <p><a href="#">Slide Panel</a></p> 
</body>
 </html>

 

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.

body {
	margin: 0 auto;
	padding: 0;
	width: 570px;
	font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
	outline: none;
}
#panel {
	background: #FAFAD2;
	height: 200px;
	display: none;
}
.slide {
	margin: 0;
	padding: 0;
	border-top: solid 4px #422410;
	background: url(button.gif) no-repeat center top;
}
.btn-slide {
	background: url(white-arrow.gif) no-repeat right -50px;
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	color: #000000;
	text-decoration: none;
}
.active {
	background-position: right 12px;
}

 

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

$(document).ready(function(){
	$(".btn-slide").click(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
});

 

The syntax of slideToggle is

$(selector).slideToggle(speed,callback);

 

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.

Wait before leaving. why can’t you follow me on twitter or be a friend on Facebook or googlePlus or linkedn to get in touch me. or join our mailing list

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Arunkumar Gudelli
I am “One among a million” Software engineers of India. I write beautiful markup.I make the Web useful. You can connect me via @twitter or @facebook or Google+ or e-mail.
http://www.arungudelli.com

Lets have chat