Side panel slider plugin (jQuery) that also slides page (inspired on medium)
HTML JavaScript
Switch branches/tags
Clone or download
duzun and eduardomb Add support for events.
  - psOpen
  - psClose
  - psBeforeOpen
  - psBeforeClose

Latest commit eec87b5 Jan 8, 2015


Side panel slider plugin (jQuery) that also slides page (inspired on medium).

NOTE: Since version 1.0.0 animation and positioning are no longer implemented by the plugin. The animation should be implemented by user's CSS. This enables CSS transform to be used instead of jQuery's animate which significatively boosts performance and makes animations smoother on mobile devices. Checkout example.html to see a CSS implementation of left and right panels.

Live demo.


  • slide page and panel together (inspired on
  • support multiple panels on same page
  • support closing when clicking outside panel or pressing ESC.
  • play well with angularJS directives (Example comming soon)


Include jQuery and jquery.panelslider.min.js scripts:

<script src=""></script>
<script src="jquery.panelslider.min.js"></script>

Bower users can get the source with:

bower install jquery-panelslider



Create an element with the panel content and a link to it.

<div id="my-panel">
  <p>Hello, world</p>

<a id="my-link" href="#my-panel">Open panel</a>

Implement animation using CSS. The CSS below implements a left panel.

/* Panel opening and closing animation lasts 200ms */
body {
  transition: transform .2s;

/* Slide page 200px to the right when panel is opened */ {
  transform: translateX(200px);

/* Position panel */
#my-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;  /* remember to set 100% height for all its parents too, including html and body */
  background-color: #eee;
  transform: translateX(-200px);

and then invoke panelslider() on the element.


You can also invoke panelslider() directly



The panel will close when ESC is pressed or any part of the page outside of panel is clicked (if options.clickClose is true).

Alternativaly, it's possible to close it manually. Because there can be only one panel active at a single time, there's no need to select which panel to close:



The panel triggers few basic events:

  .on('psOpen', function(e) {
  .on('psClose', function(e) {
  .on('psBeforeOpen', function(e) {
  .on('psBeforeClose', function(e) {


These are the supported options and their default values:

defaults = {
  bodyClass: 'ps-active', // Class to be added to body when panel is opened
  clickClose: true,       // If true closes panel when clicking outside it
  onOpen: null            // Callback after the panel opens

A call with no arguments is equivalent to:

$('#my-link').panelslider({bodyClass: 'ps-active', clickClose: true, onOpen: null});