Stack Overflow Q3
Hidden slide toggle
HTML
<div class="imageSlide">
<span class="hidden">I'm a hidden image! :D</span>
</div>
<div class="imageSlide">
<span class="hidden">I'm a hidden image! :D</span>
</div>
<div class="imageSlide">
<span class="hidden">I'm a hidden image! :D</span>
</div>
<div class="imageSlide">
<span class="hidden">I'm a hidden image! :D</span>
</div>
CSS
.imageSlide {
width: 200px;
height: 200px;
background: mediumSeaGreen;
float: left;
margin-left: 300px;
position: relative;
}
.imageSlide > span {
display: none;
position: absolute;
bottom: 0;
font-size: 20px;
}
JavaScript
$('.imageSlide').on('click', function() {
$(this).children().stop(true).slideToggle('1000');
});