jQuery Sliding panel

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

width: 800px;
height: 200px;
background: #393939;
margin: 0 auto;
border-radius: 0 0 5px 5px;
display: none;
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">

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