jquery - 表のコンテンツを Google 画像のスタイルで表示する

Question

カスタム カタログ ツールチップを自分のサイトで機能させようとしています。Google 画像検索と同じように表示して操作したいと考えていました。つまり、画像をクリックすると、その画像に関する情報が下の行に表示されます。他の何かをクリックすると、最初の行が消え、2 番目の行が表示されます。

私はjQueryが得意ではありませんでしたが、CSSで非表示に設定したセルのコンテンツを、クリックしたセルの下の行に引き込むことができましたが、わかりません何かをクリックしたときに行が入力されたら、コンテンツを削除するという点でどこに行くべきか。

探している基本的なものと現在の場所を示すフィドルページを作成しましたが、ここからどこに行くべきかわかりません

HTML

<div class="container">
    <table class="catalogue">
        <tr>
            <td><a href="#">Click</a><div class="content">This is Cell 1 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 2 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 3 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 4 content</div></td>
        </tr>
        <tr>
            <td><a href="#">Click</a><div class="content">This is Cell 5 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 6 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 7 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 8 content</div></td>
        </tr>
        <tr>
            <td><a href="#">Click</a><div class="content">This is Cell 9 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 10 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 11 content</div></td>
            <td><a href="#">Click</a><div class="content">This is Cell 12 content</div></td>
        </tr>
    </table>
</div>

CSS

.container {
    width:600px;
    margin:0 auto;
}

.catalogue {
    border-collapse:collapse;
    width:100%;
}

.catalogue td {
    height:80px;
    text-align:center;
    background:#e0e0e0;
}

.catalogue td a {
    display:inline-block;
    color:#fff;
    text-decoration:none;
    padding:5px 10px;
    background:#000;
}

.catalogue .tooltip td {
    width:100%;
    padding:1.5em;
    text-align:left;
}

.catalogue .content {
    display:none;
}

JQuery

$('.container').delegate('a', 'click', function() {
    cell_content = $(this).parent().find('.content').text();
    button_row = $(this).closest('tr');
    button_row.after('<tr class="tooltip"><td colspan="4">' + cell_content + '</td></tr>');
});