When click then it will display the specific content

I have some HTML

<div class="view-content">
   <table class="views-table cols-10" style="font-size: 12px;">
     <thead>
       <tbody>       
          <tr class="even" style="background-color: rgb(255, 255, 255);">
              <td class="views-field views-field-title" style="background-color: rgb(248, 248, 248); color: black;">
                   <b>Is there any fees charged to lodge the complaint?</b>
                   <p style="font-size: 12px; display: none;"> 
              </td>
        </tr>
        <tr class="odd" style="background-color: rgb(248, 248, 248);">
            <td class="views-field views-field-rownumber" style="background-color: rgb(248, 248, 248); color: black;"> 3 </td>
            <td class="views-field views-field-title" style="background-color: rgb(248, 248, 248); color: black;">
               <b>Can I lodge a complaint on behalf of another person?</b>
      开发者_Python百科               <p style="font-size: 12px; display: none;">
            </td>
       </tr>

and I add jquery function

$(document).ready(function() {
    $('.view-content').find('table tbody tr').each(function() {
        $(this).find('td.views-field-title p').hide();
        // alert($(this).html());
    });
})

The problem is when I add:

$('td.views-field-title b').click(function () { 
      $('td.views-field-title p').show();
}) 

it did not work,the action will display all the content of <p></p> instead display <p></p> for selected 'td.views-field-title b'.

Any ideas?

---

That's happening because your td.view-field-title p selector matches all <p> elements in <td class="view-field-title"> elements. I think you want to use next to limit what you show:

$('td.views-field-title b').click(function () {
    $(this).next('p').show();
});

Be careful with this approach though, it is highly sensitive to the structure of your HTML. A better way would be to go back up to the <td> and then come down to the <p> using closest and find:

$('td.views-field-title b').click(function () {
    $(this).closest('td').find('p').show();
});

This is still sensitive to your HTML structure but less so.

And an example of the second approach (with HTML errors fixed): http://jsfiddle.net/ambiguous/CBLtt/

---

If you want to have only one paragraph open at a time, then a simple modification to the click handler is all that is needed:

$('td.views-field-title b').click(function () {
    $('td.views-field-title p').hide();      // Hide them all.
    $(this).closest('td').find('p').show();  // Then show the one we want.
});

Example: http://jsfiddle.net/ambiguous/CBLtt/1/