Control HTML element by using JQuery
<p>I am trying to do something really practical.</p>

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

Title
Information – 05/11/2009 at 15:30
</code></pre>

<p>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.</p>

<p>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</p>

<pre><code>  $(".title").click(function () {
                $(".content").toggle();

            });

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

            });
</code></pre>

<p>For all my table.</p>

<p>Thanks, I am looking forward to your advice.</p>
