Hi!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a arcu eget nunc interdum pretium vel ut quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dignissim, orci at ullamcorper accumsan, sapien est rhoncus elit, vitae porttitor massa felis non lacus. Vestibulum a massa vitae velit malesuada cursus sed eget massa. Duis elementum lacinia lacus. Curabitur bibendum lobortis risus dapibus interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat accumsan purus, eget tincidunt est pellentesque eu. Ut consequat luctus libero, sit amet fermentum augue condimentum id. Aliquam erat volutpat. Phasellus eu lorem mi, ut facilisis sapien. Quisque hendrerit turpis ut erat pulvinar eget eleifend felis pharetra. Fusce mattis placerat feugiat. Vestibulum fringilla congue aliquet.

Praesent sagittis egestas imperdiet. Aliquam sed tortor purus, at vulputate justo. Nunc euismod est a quam pharetra gravida. Mauris ut augue massa. Sed auctor volutpat vehicula. Aliquam eu leo eu velit tempus congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed et nulla felis. Praesent eleifend dui iaculis nisi malesuada fermentum. Morbi ut turpis velit, non interdum felis. Maecenas sed velit sed ipsum pulvinar tempus at venenatis tortor. In scelerisque nulla quam. Nunc vel ornare erat.

Close

Resources: Sliding Side Panel with jQuery

Panels that can be shown or hidden with the click of the mouse allow for extra functionality to be added to a page, without taking up valuable screen real estate. Also, extra information or functionality can be made avaialable to the user without forcing them to navigate away from the page they are on. jQuery allows us to easy show and hide extra panels of information with a slick and stylish animation.

Example

Click this to see the example


Implementation

First, add the jQuery script library to your website if it isn't already there. You can find out more about jQuery and how to add it to your website at http://jquery.com/.

Next, create a new javascript file to hold the jquery code that makes the sliding panel work. Add the following code:

$(document).ready(function(){

$(".go").click(function(){
$("#block").animate({
width: "toggle",
fontSize: "14px",
opacity: "0.9"
}, "slow", "linear");
});

});

Then, create a div with the id of "block" on the page you want the panel to appear on. Put inside this div the contents of your block. It might look something like this:

<div id="block" > Your content here! <a href="#" class="go">Close</a> </div>

Finally, you'll need to add the CSS. Add the following code to your site's css document:

#block {
position: absolute;
top: 0px;
right: 0px;
background-color:#000000;
color:#FFFFFF;
display: none;
width: 300px;
height: auto;
font-size: 14px;
padding: 0px;
overflow: hidden;
}

Try playing around with the different values to see what kind of looks you can get.