views:

389

answers:

7

i have code:

<table id="table_id">
  <tr id="tr_id">
     <td id="td_id">
         <p id="tresc"> text </p>
         <a href="#" id="link">more1</a>
         <p id="tresc_more" style="display:none"> more text 1</p>
     </td>
  </tr>
  <tr id="tr_id">
     <td id="td_id">
         <p id="tresc"> text </p>
         <a href="#" id="link">more2</a>
         <p id="tresc_more" style="display:none"> more text 2 </p>
     </td>
  </tr>

  $(document).ready(
  function()
  {
   $("table#table_id tr td a#link").click(
   function()
   {
     $("table#table_id tr td p#tresc_more").toggle();
   });
  });

Problem is: When i click on the link "more1" it show's me all hidden text in every row, i want see hidden text only in one row which one i click (for example: when i click more2 i want see "more text 2"). Thanks.

+3  A: 

One problem right off the bat is that you are using non-unique ID names.

IDs must be unique, class names can be reused.

Changes:

<table id="table_id">
  <tr class="tr_class">
    <td class="td_class">
      <p class="tresc"> text </p>
      <a href="#" class="link">more1</a>
      <p class="tresc_more" style="display:none"> more text 1</p>
    </td>
  </tr>
  <tr class="tr_id">
    <td class="td_id">
      <p class="tresc"> text </p>
      <a href="#" class="link">more2</a>
      <p class="tresc_more" style="display:none"> more text 2 </p>
    </td>
  </tr>
</table>

And the JS:

$(document).ready(function() {
  $("table#table_id tr td a.link").click(function() {
    $(this).next(".tresc_more").toggle();
  });
});

$(this).next(".tresc_more").toggle(); will find the next object with that class and toggle it.

Tegeril
+1 for the reusability
Patrick
+1  A: 
$(this).next().toggle();
Yuriy Faktorovich
+1  A: 

Within the function you're binding to click, this will toggle the first element that follows the clicked link:

$(this).next().toggle();

This will toggle the first p element that follows the clicked link:

$(this).next('p').toggle();

Since you're binding a function to the link's click event, you can reference the link within that function using this (or $(this) if you want to perform jQuery actions on it).

Jeff Sternal
A: 

Edit to

<table id="table_id">
  <tr class="tr_id">
     <td class="td_id">
         <p class="tresc"> text </p>
         <a href="#" class="link">more1</a>
         <p class="tresc_more" style="display:none"> more text 1</p>
     </td>
  </tr>
  <tr class="tr_id">
     <td class="td_id">
         <p class="tresc"> text </p>
         <a href="#" class="link">more2</a>
         <p class="tresc_more" style="display:none"> more text 2 </p>
     </td>
  </tr>
</table>

and

  $(document).ready(
  function()
  {
   $("table#table_id tr td a.link").click(
   function()
   {
     $(this).next('p').toggle();
   });
  });

use next('p') so if you add another tag between the link and the paragraph the code will most likely work, as far as you doesn't add another paragraph between ;)

And as mention in another post. The ID attribute is unique in every HTML document, You can't have multiple with the same value

Terw
A: 

You can take the sibling child of the node you have clicked for example:

   $("table#table_id tr td a#link").click(
   function()
   {
     $(this).siblings("#tresc_more").toggle()
   });
  });
Patrick
A: 

hehe, it was really simple, i to much complicate. Thank you.

Mariola
A: 

I took a little liberty with your code. Here is the markup and jquery:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0   Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
    <link href="../Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .moreInfo
        {
            background-color: #f9f9f9;
        }

        .linkLook {color: #0000ff; cursor: pointer; text-decoration: underline;}
    </style>
</head>
<body>
    <table id="displayTable">
        <tbody>
            <tr>
                <td>
                    <p>
                        Show More</p>
                    <div class="moreInfo">
                        More Information to be displayed.
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        Show More</p>
                    <div class="moreInfo">
                        More Information to be displayed.
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        Show More</p>
                    <div class="moreInfo">
                        More Information to be displayed.
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {

        $('table#displayTable:eq(0) .moreInfo').hide();        
        $('table#displayTable:eq(0)> tbody td>p').addClass('linkLook');
        $('table#displayTable:eq(0)>  tbody td>p').click(function() {
            $(this).next().toggle();
        });
    });
</script>

</html>

As you can see I changed the hyperlinks to just plain paragraphs and added a click event to each one that will do the jquery toggle function. I think the main problem that you had was walking the DOM for the table and the information that you wanted clickable and hidden.

Hope this helps some.

Chris