Simple Slide Panel Using Jquery And CSS

2019-09-03T18:08:30CET

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);