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">
<p>...</p>
</div>
<!--more slides-->
</div>
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:
- 400: the slide expanded
- 199: default width
- 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() {
$p.fadeIn('slow');
});
slides.not(slide).css('width', resizedWidth);
}, function() {
slide.stop(true, true).animate({
width: defaultWidth
}, 'slow', function() {
$p.fadeOut('slow');
});
slides.not(slide).css('width', defaultWidth);
});
});
});
You can see the demo below.