jQuery: accordion content slider

jQuery can combine the accordion effect with the visual effect bound to a normal content slider. To accomplish this, we need to use the "magic" CSS table values (supported by IE8+) and the animate() method used together with the hover cumulative event handler. Let's get to the details.

The markup is really simple:

<div id="slideshow">

  <div class="slide">
  <!--more slides-->

The CSS uses table values to make all elements stretch and expand:

#slideshow {
 width: 800px;
 height: 400px;
 margin: 0 auto;
 background: #000;
 color: #fff;
 border: 1em solid silver;
 display: table;
 border-collapse: collapse;

div.slide {
 width: 199px;
 height: 400px;
 border-left: 1px solid silver;
 cursor: pointer;
 display: table-cell;

div.slide p {
 display: none;
 margin: 0;
 padding: 1em;

With jQuery, we need three values:

  1. 400: the slide expanded
  2. 199: default width
  3. 131: the width of all slides when the current slide is hovered by the mouse

Here's the code:

$(function() {

  var fullWidth = 400;
  var resizedWidth = 131;
  var defaultWidth = 199;
  var slides = $('div.slide', '#slideshow');
  slides.each(function() {
     var slide = $(this);
     var $p = $('p', slide);
     slide.hover(function() {
       slide.stop(true, true).animate({
         width: fullWidth
       }, 'slow', function() {
       slides.not(slide).css('width', resizedWidth);
     }, function() {
       slide.stop(true, true).animate({
         width: defaultWidth
       }, 'slow', function() {
       slides.not(slide).css('width', defaultWidth);


You can see the demo below.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.