Accordion table

Таблица с раздвигающимся строками при клике.

HTML

<div class="wrapper">
    
<div id="hd">
    <h1>Accordion table</h1>
</div>

<table class="data">
    <thead>
        <tr><th>Номер</th><th>Продукт</th><th>Белки</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td><span>Брынза из коровьего молока</span></td><td><span>17,9</span></td></tr>
        <tr><td>2</td><td><span>Кефир нежирный</span></td><td><span>18</span></td></tr>
        <tr><td>3</td><td><span>Молоко</span></td><td><span>11,1</span></td></tr>
        <tr><td>4</td><td><span>Ряженка</span></td><td><span>13,3</span></td></tr>
        <tr><td>5</td><td><span>Сливки 10%</span></td><td><span>17</span></td></tr>
        <tr><td>6</td><td><span>Сметана 20%</span></td><td><span>25</span></td></tr>
        <tr><td>7</td><td><span>Творог жирный</span></td><td><span>48</span></td></tr>
        <tr><td>8</td><td><span>Сыр голландский</span></td><td><span>27,4</span></td></tr>
        <tr><td>9</td><td><span>Молоко сгущеное с сахаром</span></td><td><span>56,2</span></td></tr>
    </tbody>
</table>



</div>

CSS

wrapper {
    width: 980px;
    margin: 0 auto;
    text-align: left;
}

#hd {
    margin: 10px 0px;
    padding: 20px 7px;
    background: #ffffff;
    border: 1px solid #B4B5BE;
    border-radius: 5px;
    box-shadow: inset 0px -1px 1px 0px #C7C8CF, 0px 0px 5px 0px #ACADB7; 
}

#hd  h1 {
    font: bold italic 200%/1em Verdana;
    color: #9E9FAB;
    text-shadow: 1px 0px 0px #D5D5D5;
}


.data {
    width: 100%;
    margin: 20px 0px 10px 0px;
    background: #ffffff;
    border: 1px solid #B4B5BE;
    border-radius: 5px;
    box-shadow: inset 0px -1px 1px 0px #C7C8CF, 0px 0px 5px 0px #ACADB7; 
}

.data a {
    font: normal 100%/1em Verdana;
    color: #555555;
    text-decoration: underline;
}

.data th {
    width: 33.3%;
    background: #DADBE2;
    border: 1px solid #B4B5BE;
    padding: 10px 7px;
    box-shadow: inset 0px 7px 20px 0px #F1F1F3; 
    font: bold 100%/1em Verdana;
    color: #333333;
    text-shadow: 1px 0px 0px #ffffff;
}

.data td {
    border: 1px solid #B4B5BE;
    padding: 15px 7px;
    font: normal 100%/1em Verdana;
    color: #555555;
    text-shadow: 1px 0px 0px #ffffff;
    text-align: left;
}

.data tr {
    background-color: #F9FAFC;
    cursor: pointer;
}

.data tr:nth-child(even) {
    background-color: #F5F6FA;
}

.data tr.nn {
    background-color: #EAEBEE;
    cursor: pointer;
}

.pagination {
    position: relative; 
    padding: 5px 10px;
    margin: 10px 0px;
    background: #ffffff;
    border: 1px solid #B4B5BE;
    border-radius: 5px;
    box-shadow: inset 0px -1px 1px 0px #C7C8CF, 0px 0px 5px 0px #ACADB7; 
    cursor: default;
    text-align: center;
    font: normal 100%/1em Verdana;
}

.pagination li {
    list-style: none;
    display: inline-block;
    margin: 7px 5px;
}

.pagination li a {
    padding: 2px 5px;
    border: 1px solid #B4B5BE;
    border-radius: 5px;
    text-decoration: none;
    color: #9E9FAB;
    text-shadow: 1px 0px 0px #D5D5D5;
}

.pagination li a:hover {
    border: 1px solid #78798B;
   ...

JavaScript

$(document).ready(function() {
    var count = $(".data thead th").size();

    $(".data tbody tr:not(.description)").click(function() {
        $(".data tbody tr").removeClass("nn");
        $(".description").remove();
        $(this).after("<tr class='description'><td colspan='" + count + "'><span class='close'>X</span><div></div></td></tr>");
        $(".description td div").html("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.");
        $(".description").show().animate({
            height: '+=200'
        }, 150);
        $(this).addClass("nn");
    });

    $(".data  .close").live("click", function() {
        $(".data .description").remove();
        $(".data tbody tr").removeClass("nn");
    });

});