Minimalistic customizable slide panel (without jQuery)

• Quick start
• Usage
• Examples
• Options
• Methods
• Events
• Browser support
• Copyright and license

Several quick start options are available:

• toolslide.js
• toolslide.css

• toolslide.min.js
• toolslide.min.css

bower install toolslide.js --save

npm install toolslide.js --save

Done!

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

<div id="toolslide">
	<div class="ts-container">
        <div class="ts-nav-container">
			<div class="ts-nav-item" ts-target="first">
			</div>
			<!-- Add more navigation buttons here -->
		</div>
		<div class="ts-content-container">
			<div id="first" class="ts-content-item">
				<div class="example-panel">
					<span>First panel content goes here</span>
				</div>
			</div>
			<!-- Add more content panels here -->
		</div>
	</div>
</div>

toolslide.js makes use of html attributes to bind navigation elements to respective content.

All you need to do is invoke toolslide on an element:

var myToolslide = toolslide(elemment, options);

You can also initialize with css selector string:

var myToolslide = toolslide("#elementId", options);

There are some example usages that you can look at to get started. They can be found in the examples folder.

• Panel on the left
• Panel on the right
• Panel at the top
• Panel at the bottom

toolslide.js can accept an options object to alter the way it looks and behaves. If no options object is passed default values are used. The structure of an options object is as follows:

{
  position: "left",
  height: "100%",
  width: "300px",
  startOpen: true,
  closeable: true,
  autoclose: false,
  autocloseDelay: 5000,
  clickOutsideToClose: true,
  minClosedSize: 0,
  toggleButton: "",
  embed: false,
  navigationItemWidth: "50px",
  navigationItemHeight: "50px",
  navigationOffsetX: "0px",
  navigationOffsetY: "0px",
  animations: {
    replace: "crossfade 0.5s ease-in-out",
    toggle: "slide 0.5s ease",
  },
  listeners: {
    beforeOpen: function(panel) {},
    afterOpen: function(panel) {},
    berforeClose: function(panel) {},
    afterClose: function(panel) {},
    beforeToggle: function(oldContent, newContent) {}
    afterToggle: function(oldContent, newContent) {}
  }

Here is the explanation of options object:

Methods are called on toolslide instances. You shoud save the instances to variable to have further access to it.

Show the slide panel.

toolslide.open();

Hide the slide panel.

toolslide.close();

Check if panel is opened.

toolslide.isOpen();

Check if target content element is active. Accepts DOM element as well as just the id.

toolslide.isOpen("elementId");

Sets element with specified id as new active item.

toolslide.setActiveById("elementId");

Sets element at specified index as active item.

toolslide.setActiveByIndex(0);

toolslide.js provides custom events for some of it's actions. Appropriate callbacks can be specified in options.

Licensed under MIT license.

^ back to top