Toggle show/hide divs in a table

Only one div should be showing at any time

by eventide

HTML

<div id="movieListTable">
    <div class="movieRow alt">
        <div class="movieCell">
            <div class="vitalsTable">
                <div class="vitalsRow">
                    <div class="titleCell">
                        <input type="checkbox" class="chkDeleteMovie" name="deleteMovies[]" value="29"
                        title="Check this movie for deletion">
                        <label class="lblDeleteMovies" title="Check this movie for deletion">Delete</label>
                        <br>
                        <label class="lblTitle">The Lord of the Rings: Fellowship of the Ring</label>
                    </div>
                    <div class="directorCell">Directed by
                        <label class="lblDirector">Peter Jackson</label>
                    </div>
                    <div class="lengthCell">
                        <label class="lblLength">180</label>mins</div>
                    <div class="genresCell">
                        <label clas "lblgenre1"="">undefined</label>
                        <br>
                        <label clas "lblgenre2"="">undefined</label>
                        <br>
                    </div>
                    <div class="mpaaRatingCell">
                        <label class="lblMpaaRating">PG-13</label>
                    </div>
                    <div class="statusCell">
                        <label class="lblStatus">Own it</label>
                    </div>
                </div>
            </div>
            <div class="detailsTable">
                <div class="detailsRow">
                    <div class="editCell">
                        <button class="button btnEditMovie" value="Edit This Movie" title="Click to edit this movie">Edit This Movie</button>
                    </div>
                    <div class="actorsCell">Starring
                        <br>
                        <label class="lblActors"></label>
                    </div>
                    <div...

CSS

.hover {
    background-color: #D6DCF3;
}
.movieListTable, .vitalsTable, .detailsTable {
    display: table;
    width: 100%;
    line-height: 1.5em;
}
.vitalsTable {
    margin-top: 10px;
}
.detailsTable {
    margin-top: 3px;
}
.movieRow, .vitalsRow, .detailsRow {
    display: table-row;
}
.titleCell, .directorCell, .lengthCell, .genresCell, .yearCell, .statusCell, .editCell, .actorsCell, .formatCell, .synopsisCell, .mpaaRatingCell, .myRatingCell {
    display: table-cell;
    vertical-align: bottom;
    padding: 5px;
}
.titleCell {
    width: 330px;
    font-size: 120%;
}
.directorCell {
    width: 225px;
}
.lengthCell {
    width: 65px;
}
.genresCell {
    width: 130px;
}
.mpaaRatingCell {
    width: 60px;
}
.statusCell {
    width: 130px;
}
.editCell {
    width: 60px;
}
.actorsCell {
    width: 245px;
}
.synopsisCell {
    width: 400px;
}
.formatCell {
    width: 95px;
}
.yearCell {
    width: 35px;
}
.myRatingCell {
    width: 105px;
}
.titleCell, .directorCell, .lengthCell, .genresCell, .mpaaRatingCell, .statusCell {
    border-bottom: 1px solid #CCC;
}
.editCell, .actorsCell, .synopsisCell, .formatCell, .yearCell, .myRatingCell {
    border-bottom: 1px solid #000;
}
.lblTitle, .actorsCell, .synopsisCell {
    font-weight: bold;
}
.lblActors, .lblSynopsis {
    font-weight: normal;
}
.lblDeleteMovies {
    font-size: 90%;
}
.button {
    font-size: 90%;
}
.btnEditMovie {
    width: 53px;
    margin: 0;
    text-align: center;
}
.btnEditMovie .ui-button-text {
    padding: 4px 1px 2px 1px;
    margin: 0;
}

JavaScript

$('div.detailsTable').hide();

$('#movieListTable').on('mouseover', 'div.movieRow', function () {
    $(this).addClass('hover').css('cursor', 'default');
}).on('mouseout', 'div.movieRow', function () {
    $(this).removeClass('hover').css('cursor', 'default');
});

$('#movieListTable').on('click', 'div.vitalsTable', function (e) {

    // Don't do anything if the Edit button or Delete checkbox is clicked
    if (event.target.className !== 'btnEditMovie' && event.target.className !== 'chkDeleteMovie') {
        // The easing seems to break the ability to check the toggle state
        //$(this).parent().parent().find('div.detailsTable').toggle('blind', 'easeInOutQuart', 300);
        $(this).next('div.detailsTable').toggle();
    }
    
    if ($(this).next('div.detailsTable').is(':visible')) {
        alert('visible');
    } else {
        alert('not visible');
    }
});