Simple Customizable Slide Panel | toolslide.js

toolslide.js is a minimalistic customizable slide panel for creating off-canvas navigation, tabbed drawer side panels, and more.

css slide out drawer, drawerjs, css drawer animation, drawer in html, javascript sliding drawer, drawer nav, responsive drawer css, navigation drawer web example

How to make use of it:

1. Insert the stylesheet toolslide.css within the header and the JavaScript toolslide.js at the finish of the doc.

<link rel="stylesheet" href="./dist/toolslide.css" />
<script src="./dist/toolslide.js"></script>

2. The minimal HTML structure for the drawer panel.

<div id="toolslide">
  <div class="ts-container">
    <div class="ts-nav-container">
      <div class="ts-nav-item" ts-target="first">
        Tab 1
      <div class="ts-nav-item" ts-target="second">
        Tab 2
      <div class="ts-nav-item" ts-target="third">
        Tab 3
    <div class="ts-content-container">
      <div id="first" class="ts-content-item">
        <div class="example-panel">
          <h5>Panel configuration:</h5>
          <textarea>Some fancy text here...</textarea>
      <div id="second" class="ts-content-item">
        <div class="example-panel">
          <span>Second panel content goes here</span>
      <div id="third" class="ts-content-item">
        <div class="example-panel">
          <span>Third panel content goes here</span>

3. Initialize the plugin and completed it.

var toolslide = toolslide("#toolslide", {
    // options here

4. Config the sliding drawer panel.

var toolslide = toolslide("#toolslide", {

    // 'top', 'right', 'bottom'
    position: "left",

    // panel height
    height: "100%",

    // panel width
    width: "25%",

    // open the panel on init
    startOpen: true,

    // is it closable?
    closeable: true,

    // min window size to close the panel
    minClosedSize: 0,

    // selector of toggle button
    toggleButton: "",

    // embed the panel in a separate container
    embed: false,

    // width/height of navigation itmes
    navigationItemWidth: "50px",
    navigationItemHeight: "50px",

    // auto close after a timeout
    autoclose: false,
    autocloseDelay: 5000,

    // close the panel on click outside
    clickOutsideToClose: true,

    // customize animations here
    animations: {
      replace: "crossfade 0.5s ease-in-out",
      toggle: "slide 0.5s ease",


5. API strategies.

// open the panel;

// close the panel

// check if the panel is opened

// check if target content is active

// set active element

// set active element by index

Here is the explanation of options object:

positionstringPosition of the panel on the screen“top”, “bottom”, “left”, “right”
heightstringPanel height“200px”, “20%”
widthstringPanel width“200px”, “20%”
startOpenbooleanOpen panel after initializationtrue, false
closeablebooleanAllow panel to be closed (by clicking active navigation element)true, false
autoclosebooleanAllow panel to be auto closed (only when mouse cursor is outside)true, false
autocloseDelayintAuto close delay in miliseconds5000
clickOutsideToClosebooleanAllow panel to be closed when clicked outsidetrue, false
animations.replacestringAnimation used when changing active panel“crossfade 0.5s ease-in-out”, “slide 1s ease”, “slidefade 2s ease-in-out”
animations.togglestringAnimation used when panel is opened/closed“slide 0.5s ease”
listeners.beforeOpenfunctionCallback fired before panel is openedfunction (panel) {…}
listeners.afterOpenfunctionCallback fired after panel is openedfunction (panel) {…}
listeners.beforeClosefunctionCallback fired before panel is closedfunction (panel) {…}
listeners.afterClosefunctionCallback fired after panel is closedfunction (panel) {…}
listeners.beforeTogglefunctionCallback fired before active content is changedfunction (old, new) {…}
listeners.afterTogglefunctionCallback fired after active content is changedfunction (old, new) {…}

Multifunctional Sliding Drawer Plugin, toolslide.js Github

See Demo And Download

Official Website(karenpommeroy): Click Here

This superior jQuery/javascript plugin is developed by karenpommeroy. For extra Advanced Usages, please go to the official website.

Related Posts


Responsive Multiple Selection Combo Box using Bootstrap 3 | MagicSuggest

MagicSuggest is an easy-to-use jQuery plugin for creating a combo menu that allows you to select multiple items from a dropdown list with typing and auto-complete support….


Material Design Inspired Tab UI In Vanilla JavaScript

Material Design tab vanilla JS implements a material design-inspired tab component with a click ripple effect and an active sliding menu cursor. Must Read: Responsive Accessible Tabs…


Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…


Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…


Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…


Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…