Easy Sliding Side Panel Plugin For jQuery - dockPanel

The jQuery dockPanel plugin lets you create off-canvas side panels sliding from the left or right of the screen when toggled. Ideal for app-style revealing navigation for your web app.

How to use it:

1. Create the HTML for the side panel.

<div id="panelRight">
  ... content here ...
</div>

#panelRight {
  display: none;
  width: 300px;
  background: #333;
}

2. Add a close button to the side panel.

<div id="panelRight">
  ... content here ...
  <div class="closeIcon">
    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1" stroke-linecap="square" stroke-linejoin="arcs" onclick='hidePanel()'><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
  </div>
</div>

.closeIcon {
  position: absolute; 
  left: 5px;
  right: 5px;
  top: 5px;
  cursor: pointer;
}

3. Initialize the dockPanel plugin.

$(function() {
  $('#panelDemo').dockPanel();
});

4. Toggle the side panel.

$('#panelDemo').dockPanel('show', ()=>{ console.log('shown') });
$('#panelDemo').dockPanel('hide', ()=>{ console.log('hidden') });

5. Make the side panel slide from the left hand side of the web page.

$(function() {
  $('#panelDemo').dockPanel({
    dock: 'left'
  });
});

---

This awesome jQuery plugin is developed by oohacker. For more Advanced Usages, please check the demo page or visit the official website.