SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<!-- Project 1 -->
<div style="height: 50px; border: solid 1px #ddd;">I'm using space!</div>
<div class="slickbox">
    <div class="slide_show">
        <div class="slider">
            <ul>
                <li>
                    <img alt="figure 1" src="http://dummyimage.com/700x1300/000/fff&text=I'm+a+picture!,+woohoo!" width="200" height="300" />
                </li>
                <li>
                    <img alt="figure 1" src="http://dummyimage.com/700x1300/000/fff&text=I'm+a+picture!,+woohoo!" width="200" height="300" />
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="more"><a href="#">Scroll baby scroll</a></div>
<!-- END Project 1 -->

<!-- Project 2 -->
<div style="height: 50px; border: solid 1px #ddd;">I'm using space!</div>
<div class="slickbox">
    <div class="slide_show">
        <div class="slider">
            <ul>
                <li>
                    <img alt="figure 1" src="http://dummyimage.com/700x1300/000/fff&text=I'm+a+picture!,+woohoo!" width="200" height="300" />
                </li>
                <li>
                    <img alt="figure 1" src="http://dummyimage.com/700x1300/000/fff&text=I'm+a+picture!,+woohoo!" width="200" height="500" />
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="more"><a href="#">Scroll baby scroll</a></div>
<!-- END Project 2 -->

<!-- Project 3 -->
<div style="height: 50px; border: solid 1px #ddd;">I'm using space!</div>
<div class="slickbox">
    <div class="slide_show">
        <div class="slider">
            <ul>
                <li>
                    <img alt="figure 1" src="http://dummyimage.com/700x1300/000/fff&text=I'm+a+picture!,+woohoo!" width="200" height="500" />
                </li>
                <li>
                    <img alt="figure 1"...

JavaScript

$('.slickbox').hide().each(function() {
    $.data(this, 'height', $(this).height());
});
$('.more a').toggle(function() {
    var sb = $(this).parent().prev('.slickbox').slideDown(3200);
    $('html, body').animate({
        scrollTop: '+=' + sb.data('height')
    }, 3200);
    return false;
}, function() {
    var sb = $(this).parent().prev('.slickbox').slideUp(3200);
    $('html, body').animate({
        scrollTop: '-=' + sb.data('height')
    }, 3200);
    return false;
});


//should I use Click?