jquery - jQuery を使用してテーブル要素を非表示にする

Question

2 行のテーブルがあります。一番上の行は 1 列で、2 番目の行は 3 列です。

4 つの「テーブル セル」にはそれぞれグラフィックとキャプションがあり、同じクラスが割り当てられます。

4 つのセルのいずれかをクリックし、4 つのセルすべての内容を非表示にして、クリックされたセルに基づいて新しい内容に置き換えられるようにしたいと考えています。

それぞれに同じ td クラスを割り当てることで、2 番目のテーブル行にある 3 つのセルに対して (show メソッドと hide メソッドを使用して) 機能させることができますが、単一のトップを作成する方法がわかりません行のセルをクリックして、下の 3 つを非表示にするか、下の 3 つのいずれかをクリックして上の行のセルを 2 行目の他の 2 つと一緒に非表示にします。

jQueryでこれを行う簡単な方法はありますか?

コードで更新

コードを掲載せずに申し訳ありません。私はこれが初めてで、ここまでしか理解していませんでしたが、なぜあなたがそれを見たいのか理解できました... :-)

これが私がこれまでに持っているものです。助けてくれてありがとう。

$(document).ready(function () {
    $('.box').hide().filter('.top').show();
    $('.box h1').click(function () {
        $(this).hide();
        $(this).parent().siblings().hide();
        $(this).siblings().show().last();
        $(this).siblings('a.up-link').click(function () {
            $(this).siblings().hide().filter('h1').show();
            $(this).parent().siblings(':not(h1)').show();
            $(this).remove();
        });
    });
});

<table width="100%" border="0" cellpadding="0">
<tr>
    <td class="box top">
        <h1 style="background-image:url(blue.jpg);width:275px;height:230px; background-repeat:no-repeat;">
        <p class="caption-2">
            Topic 1
        </p>
        </h1>
        <div class="box">
            <h1>Answer 1</h1>
        </div>
    </td>
</tr>
<tr>
    <td class="box top">
        <h1 style="background-image:url(blue.jpg);width:275px;height:230px; background-repeat:no-repeat;">
        <p class="caption-2">
            Topic 2
        </p>
        </h1>
        <div class="box">
            <h1>Answer 2</h1>
        </div>
    </td>
    <td class="box top">
        <h1 style="background-image:url(blue.jpg);width:275px;height:230px; background- repeat:no-repeat;">
        <p class="caption-2">
            Topic 3
        </p>
        </h1>
        <div class="box">
            <h1>Answer 3</h1>
        </div>
    </td>
    <td class="box top">
        <h1 style="background-image:url(blue.jpg);width:275px;height:230px; background- repeat:no-repeat;">
        <p class="caption-2">
            Topic 4
        </p>
        </h1>
        <div class="box">
            <h1>Answer 4</h1>
        </div>
    </td>
</tr>
</table>