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>
      <div class="ts-nav-item" ts-target="second">
        Tab 2
      </div>
      <div class="ts-nav-item" ts-target="third">
        Tab 3
      </div>
    </div>
    <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>
      </div>
      <div id="second" class="ts-content-item">
        <div class="example-panel">
          <span>Second panel content goes here</span>
        </div>
      </div>
      <div id="third" class="ts-content-item">
        <div class="example-panel">
          <span>Third panel content goes here</span>
        </div>
      </div>
    </div>
  </div>
</div>

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
toolslide.open();
// close the panel
toolslide.close();
// check if the panel is opened
toolslide.isOpen();
// check if target content is active
toolslide.isActive(target);
// set active element
toolslide.setActiveById("elementId");
// set active element by index
toolslide.setActiveByIndex(0);

Changelog:

v1.2.0 (03/28/2023)

• Update

v1.1.3 (05/20/2021)

• Fixed styling that sometimes prevented dragging preview within the container