Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Stacky is a simple jquery plugin for organizing your container as a stack. It makes use of css3 transitions for creating a slide down/up animation as you toggle the stack.


View an example at the following link

##How to set up

To set up a basic stacky :

  • include the dependent libraries and css files
	<link href="stacky.css" rel="stylesheet" type="text/css" />
	<script src=""></script>
	<script src="stacky.js"></script>
  • create a basic html template as shown below
	<div class="three">
			<!-- some content -->
			<!-- some content -->
			<!-- some content -->
		    <!-- some content -->  
  • call the stacky function over the container

Setting options

Setting custom width

By default the stacky stretches to the full width of its parent container, however if you want to set a static width, you can pass it along as an option as shown below.

		width: 100 //set the stacky width to 100px

Hiding the default toggle button

stacky attaches a default toggle button to the first child container. However if you wish to hide this button you can simply set the showToggleButton property to false as shown below

			    showToggleButton : false

Custom events for opening, collapsing and toggle a stacky

As mentioned above, stack provides a default toggle button. However if you wish to open, collapse or toggle an external source such as a button click, you can simply trigger a openStacky , collapseStacky or toggleStacky events.

	$("#btnOpen").click(function () {
			    $(".two").trigger("openStacky"); //opens a stacky when a button is clicked
	$("#btnClose").click(function () {
			    $(".two").trigger("collapseStacky"); //collapses a stacky
	$("#btnToggle").click(function () {
			    $(".two").trigger("toggleStacky"); //toggles the state of a stack


Stacky is licensed under MIT


A simple jquery plugin for organizing your container as a stack.






No releases published


No packages published