06
Jul
2012

jQuery Sliding panel

jquery_logo
In this jQuery tutorial I will show how to create a sexy sliding panel. This is very useful and attractive.

When visitor click a button, a panel will slide down and appear. And when the same button is clicked again it will slide up and hide the panel.

Step 1:
Create a panel and a button.

<div id="panel"></div>
<a href="#"><div class="panel-button"></div></a>

Step 2:
Add CSS for panel and button

#panel{
width: 800px;
height: 200px;
background: #393939;
margin: 0 auto;
border-radius: 0 0 5px 5px;
display: none;
}
.panel-button{
width: 90px;
height: 30px;
background: #393939 url(img/arrow-down.png) no-repeat 37px 5px;
margin: 0 auto;
border-radius: 0 0 5px 5px;
}
.active-panel {
background: #393939 url(img/arrow-up.png) no-repeat 37px 5px;
}

Step 3:
Call jQuery Library

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 4:
Now we will add jQuery code in head section and tell it to slide toggle panel when button is clicked.

<script type="text/javascript">
$(document).ready(function(){
	$(".panel-button").click(function(){
	$("#panel").slideToggle("slow");
	$(this).toggleClass("active-panel");
	});
});
</script>

Done!!!
Check below link for live demo.


About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply