Basic Demo (v2+) - Click to open & close

Expand Kwick panel : 0 1 2 3, or Collapse | Play | Pause

#basic li{
  float: left;
  width: 125px;
  height: 100px;
  margin-right: 5px;
}
#basic .kwick1 { background: #53b388; }
#basic .kwick2 { background: #5a69a9; }
#basic .kwick3 { background: #c26468; }
#basic .kwick4 { background: #bf7cc7; }
/* cancel margin on last kwick (if you set a margin above) */
#basic .kwicks.horizontal .kwick4 { margin-right: none; }
/* cancel margin on last kwick (if you set a margin above) */
#basic .kwicks.vertical .kwick4 { margin-bottom: none; }

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

$('#basic').kwicks({
  event : 'click',
  eventClose: 'click',
  max : 330,
  spacing : 5,
  completed : function(){
    addMessage('<span class="hilight">something, something,' +
      'something... com-plete</span>');
  }
});

Example 1: A la Mootools

#example1 li{
  float: left;
  width: 125px;
  height: 100px;
  margin-right: 5px;
}
#example1 .kwick1 { 
  background: #53b388 url('../demo/meet.gif');
}
#example1 .kwick2 {
  background: #5a69a9 url('../demo/kwicks.gif');
}
#example1 .kwick3 {
  background: #c26468 url('../demo/for.gif');
}
#example1 .kwick4 { 
  background: #bf7cc7 url('../demo/jquery.gif');
  margin-right: none;
}

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

$('#example1').kwicks({
  max: 205,
  spacing: 5
});

Example 2: Using "Active" Class

#example2 li {
  float: left;
  width: 125px;
  height: 100px;
  margin-right: 5px;
}
#example2 .kwick1 { background: #53b388; }
#example2 .kwick2 { background: #5a69a9; }
#example2 .kwick3 { background: #c26468; }
#example2 .kwick4 { background: #bf7cc7; margin-right: none; }
#example2 .kwick1.active { background: #86e6bb; }
#example2 .kwick2.active { background: #8d9cdc; }
#example2 .kwick3.active { background: #f5979b; }
#example2 .kwick4.active { background: #efaffa; }

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

$('#example2').kwicks({
  max: 205,
  spacing: 5
});

Example 3: Verticle Arrangement

#example3 li{
  width: 125px;
  height: 100px;
  margin-bottom: 3px;
}
#example3 .kwick1 { background: #ff5100; }
#example3 .kwick2 { background: #b33900; }
#example3 .kwick3 { background: #ffd000; }
#example3 .kwick4 { background: #b39200; margin-bottom: none; }

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

$('#example3').kwicks({
  max : 205,
  spacing : 3,
  isVertical : true
});

Example 4: Use Min instead of Max

#example4 li{
  width: 125px;
  height: 100px;
  margin-bottom: 3px;
}
#example4 .kwick1 { background: #008da3; }
#example4 .kwick2 { background: #f07000; }
#example4 .kwick3 { background: #a33100; }
#example4 .kwick4 { background: #8cab2b; margin-bottom: none; }

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

$('#example4').kwicks({
  min : 30,
  spacing : 3,
  isVertical : true
});

Example 5: Using Sticky and Custom Event

(this example uses 'click' as the custom event)

#example5 li{
  width: 125px;
  height: 100px;
  margin-bottom: 3px;
}
#example5 .kwick1 { background: #4D9AA8; }
#example5 .kwick2 { background: #82A616; }
#example5 .kwick3 { background: #F29A1F; }
#example5 .kwick4 { background: #A66A16; margin-bottom: none; }

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

$('#example5').kwicks({
  min : 30,
  spacing : 3,
  isVertical : true,
  sticky : true,
  event : 'click'
});

Example 6: Custom Easing and Duration

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

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

$('#example6').kwicks({
  max: 320,
  spacing: 5,
  duration: 1500,
  easing: 'easeOutBounce'
});

Example 7: Be Creative!

What? A little Nat King Cole can't hurt...

• L

  is for the way you look at me
• O

  is for the only one I see
• V

  is very, very extraordinary
• E

  is even more... I refuse to finish this...

#example7 li {
  float: left;
  width: 90px;
  height: 100px;
}
#example7 .kwicks_inner {
  width: 200px;
}
#example7 .bigLetter {
  font-size: 60px;
  height: 100px;
  color: red;
  float: left;
}
#example7 .smallText {
  display: none;
  text-align: center;
  width: 140px;
  color: #ccc;
  font-size: 16px;
  margin-top: 13px;
  float: right;
}
#example7 li.active .smallText {
  display: block;
}

<ul id="example7">
 <li>
  <div class="kwicks_inner_inner">
   <div class="bigLetter">L</div>
   <div class="smallText">is for the way you look at me</div>
  </div>
 </li>
 <li>
  <div class="kwicks_inner">
   <div class="bigLetter">O</div>
   <div class="smallText">is for the only one I see</div>
  </div>
 </li>
 <li>
  <div class="kwicks_inner">
   <div class="bigLetter">V</div>
   <div class="smallText">is very, very extraordinary</div>
  </div>
 </li>
 <li>
  <div class="kwicks_inner">
   <div class="bigLetter">E</div>
   <div class="smallText">is even more... I refuse to finish
    this...</div>
  </div>
 </li>
</ul>

$('#example7').kwicks({
    max: 200,
    duration: 400,
    sticky: true
});