Control HTML element by using JQuery

Question

Hi,

I am trying to do something really practical.

<table class="annplain" cellspacing="0" cellpadding="15" width="325">
        <tbody>
          <tr>
             <td><p><strong><a href="#Title" class="Title">Title</a></strong><br />
                <span class="annfrom">date<br />
                </span>
                    <span class="content">.</span>
        <br />
                <br />
            </p></td>
          </tr>
        </tbody>
      </table>

Title
Information – 05/11/2009 at 15:30

I got many of such kind HTML table generating from my PHP code. What I have to is to Hide all the content in section first, the people only can see the title. And then when people click on the title , i want to display the span tag content.

I used toggle function with jQuery to work as switch for Span content. My question is how can I do it for all the table instead of hard code like

  $(".title").click(function () {
                $(".content").toggle();

            });

$(".title1").click(function () { $(".content2").toggle();

            });

For all my table.

Thanks, I am looking forward to your advice.

Answer 1

Why do not use a div for the title and a div for the table (without title).

Hide/show the div which contains th table when you click the header.

Regards.

Answer 2

Assuming you use a class of Title for all of your tables then you can do this:

$(".Title").click(function () {
  $(".content",$(this).closest("td")).toggle();
});

$(this).closest("td") will get you to the td and thus limit the scope of the content selection to that which is under the title that was clicked.