Easily add a jQuery Sliding Panel to your site with SlidePanel

Call it a ‘help’ tab, a ‘slider’, a ‘panel’, or whatever you want. The fact of the matter is, sliding panels are a beautiful way to encapsulate information on a page that doesn’t need to be “front and center”. Using this code, you can quickly create a great-looking extension that can hold whatever your heart (or client) desires. Customize yours, and don’t forget to come back and drop us a link so we can see how you’re using it…

Try SlidePanel (opens in new window)

 

To get started follow the instructions below:

Download the plugin

Github: https://github.com/egdelwonk/SlidePanel/
Project Homepage: http://codebomber.com/jquery/slidepanel/

Include required files

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.codebomber.panel.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.codebomber.panel.css">

Add a panel element to your html

<div id="panel" class="cb_slide_panel">
<div class="wrapper">
<a class="close" href="#">Close</a>
<div class="inner">
<div class="wrapper"></div>
</div>
</div>
</div>

Load the plugin on your element

<script type="text/javascript">
$(document).ready(
function(){
$('#panel').codebomber_Panel();
}
);
</script>

Add a panel trigger

The href attribute is used to load external HTML content into your panel

<a href="external.php" rel="panel">Show Panel</a>

Misc

If you pass an element to the plugin that does not currently exist in the dom, the plugin will create a default element with the above format.