Fake table cells

Faking table cells in divs so that we can have a slide in row (<tr> does not slide so well).

by Daniel Mason

HTML

<div id="container">
    <div class="title">[title]</div>
    <div class="more-info">more</div>
    <div class="download">[download]</div>
    <div class="release-date">Release Date: [date]</div>
    <div class="changes">[changes]</div>
</div>

CSS

#container {
    width:100%;
    background-color: red;
    min-width: auto;
}
.title {
    position: relative;
    float: left;
    width: 90px;
    height: 50px;
    background: blue;
}
.download {
    position: relative;
    float: right;
    background: red;
    width: 50px;
    height: 50px;
    margin-right: 50px;
}
.more-info {
    position: relative;
    float: right;
    background: green;
    width: 50px;
    height: 50px;
}
.changes {
    height: 50px;
    background: yellow;
    display:none;
}
.release-date {
    display: block;
    height: 50px;
    overflow: hidden;
    background: purple;
}

JavaScript

var $moreInfo = $('.more-info'),
    $changes = $('.changes');
$moreInfo.click(function() {
    if($changes.is(':visible')) {
        $changes.slideUp(400);
    }
    else {
        $changes.slideDown(400);
    }
});