Collapse/expand text below images

HTML

<div id="photoframe">
    <img src="" alt="This is the stair where I always sit" />
    <img src="" alt="This is not the place where I sit" />
    <img src="" alt="" />
    <img src="" alt="This is where I stand" />
    <div class="subtitle">
        <span id="subtitle" />
    </div>
</div>

CSS

div { display:block; }
div#photoframe { float:left; }
img { height:75px; width:100px; }
div.subtitle { text-align:center; }

JavaScript

var $subtitle;
$(document).ready(function () {
    $subtitle = $("span#subtitle");
    $subtitle.text("");
    $("#photoframe img").click(function () {
        var speed = $subtitle.text() ? 600 : 0;
        $subtitle.data("nextText", $(this).attr("alt") || "-no description-");
        $subtitle.slideUp(speed, showNext);
    });
});
function showNext() {
    $subtitle.text($subtitle.data("nextText"));
    $subtitle.slideDown(600);
}