Multifunctional Sliding Drawer Plugin In JavaScript – toolslide.js

Category: Javascript | March 28, 2023
Views Total:282 views
Official Page:Go to website
Last Update:March 28, 2023


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.2.0 (03/28/2023)

  • Update

v1.1.3 (05/20/2021)

  • Fixed styling that sometimes prevented dragging preview within the container

You Might Be Interested In:

Leave a Reply