Multifunctional Sliding Drawer Plugin In JavaScript – toolslide.js

Category: Javascript | May 20, 2021
Views Total:414 views
Official Page:Go to website
Last Update:May 20, 2021


Multifunctional Sliding Drawer Plugin In JavaScript – toolslide.js


toolslide.js is a multifunctional sliding drawer plugin to create off-canvas navigation, tabbed side drawer panels, and much more.

How to use it:

1. Insert the stylesheet toolslide.css in the header, and the JavaScript toolslide.js at the end of the document.

<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 done.

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 methods.

// 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


v1.1.3 (05/20/2021)

  • Fixed styling that sometimes prevented dragging preview within the container

You Might Be Interested In:

Leave a Reply