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.

##Demo

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="http://code.jquery.com/jquery-latest.js"></script>
	<script src="stacky.js"></script>

• create a basic html template as shown below

	<div class="three">
	    <div>
			<!-- some content -->
	    </div>
	    <div>
			<!-- some content -->
	    </div>
	    <div>
			<!-- some content -->
	    </div>
	    <div>
		    <!-- some content -->  
	    </div>
	</div>	

• call the stacky function over the container

	$(".three").stacky();	

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.

	$(".three").stacky({
		width: 100 //set the stacky width to 100px
	});	

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

	$(".two").stacky({
			    showToggleButton : false
	});

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