Kwicks Playground

https://github.com/Mottie/Kwicks

by Mottie

HTML

<link rel="stylesheet" href="http://mottie.github.com/Kwicks/css/kwicks.css">
<script src="http://mottie.github.com/Kwicks/js/jquery.kwicks.js"></script>
<script src="http://mottie.github.com/Kwicks/js/jquery.easing.1.3.js"></script>
<input class="num" type="text" value="0"> <button>Set</button>
<button>Play</button> <button>Pause</button><br><br>

<ul id="demo">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS

.kwick-panel {
    float: left;
    width: 125px;
    height: 100px;
    margin-right: 5px;
}
.kwick1 { background: #53b388; }
.kwick2 { background: #5a69a9; }
.kwick3 { background: #c26468; }
.kwick4 { background: #bf7cc7; }

/* cancel margin on last kwick (if you set a margin above) */
.kwicks.horizontal .kwick4 { margin-right: none; }
/* cancel margin on last kwick (if you set a margin above) */
#basic .kwicks.vertical .kwick4 { margin-bottom: none; }

body { margin: 30px; }
input.num { width: 50px; }

JavaScript

$('#demo').kwicks({

    // *** Appearance ***
    // The width or height of a fully expanded kwick element
    max: 300,
    // The width or height of a fully collapsed kwick element
    min: null,
    // The width (in pixels) separating each kwick element
    spacing: 2,

    // Kwicks will align vertically if true
    isVertical: false,

    // One kwick will always be expanded if true
    sticky: false,
    // The initially expanded kwick (if and only if sticky is true). zero based
    defaultKwick: 0,

    // Class added to active (open) kwick
    activeClass: 'active',

    // *** Interaction ***
    // The event that triggers the expand effect
    event: 'click',
    // The event that triggers the collapse effect
    eventClose: 'click',

    // *** Functionality ***
    // The number of milliseconds required for each animation to complete
    duration: 500,
    // Custom animation easing (requires easing plugin if anything
    // other than 'swing' or 'linear')
    easing: 'swing',

    // *** Slideshow ***
    // Slideshow duration
    showDuration: 2000,
    // set to 1 for left-to-right, -1 for right-to-left or 0 for a random slide
    showNext: 1,

    // *** Callbacks ***
    // event called when kwicks has been initialized
    initialized  : function(kwick){},
    // event called when the event occurs (click or mouseover)
    init: function(kwick) {},
    // event called before kwicks expanding animation begins
    expanding: function(kwick) {},
    // event called before kwicks collapsing animation begins
    collapsing: function(kwick) {},
    // event called when animation completes
    completed: function(kwick) {},
    // event called when slideshow starts
    playing: function(kwick) {},
    // event called when slideshow ends
    paused: function(kwick) {}

});

// Shortcut methods available in Kwicks v2.1
$('button').click(function(){
    var demo = $('#demo'),
        txt = $(this).text();
    switch(txt){
        case 'Set':
           ...