[ASP.NET] Show/Hide Divs in a ListView

Question

Hi, I have a ListView binded to a GenericList and for each Item it is creating this tr and td's structure:

<tr>
   <td>Name</td>
   <td>Surname</td>
   <td>14/08/2009</td>
   <td><a href="#" class="trigger">Show</a></td>
</tr>
<tr>
   <td colspan="4">
      <div class="showPicture">
         <img src="" alt="" />
      </div>
   </td>
</tr>

My question is that I would like to show and hide the div containing the image without using a postback to the server. What I'm trying to do is to get the link that was clicked, find it's parent td and the parent tr, navigate to the next tr and find the div within it.

I have come up with the following JavaScript to try and get the correct div and show it or hide it but it's giving me the following error: "Microsoft JScript runtime error: 'parents(...).parents(...).nextSibling.firstChild' is null or not an object"

    <script type="text/javascript">
    $(function(){
        $("div.shareLink").hide();
        $("a.trigger").click(function(eventObject){
            $(this).parents('td').parents('tr').nextSibling.firstChild.firstChild.toggle(400);
            return false;
        });
    });
    </script>

I'm new to JavaScript and just changed started developing in ASP.NET as I used to develop Windows Applications before, so if anyone could give me the heads up on that I'm doing wrong I would really appreciate it.

Thanks in advance, Tonio

Answer 1

try this:

$(this).parent().parent().next().find('div.showPicture').toggle();