Using JQury To Toggle Div in Next Row

Question

I'm trying to toggle the build_files_toggle classed div in the next row when you click the build_files_toggld classed link above it. I can get the next row to collapse with $(this).parent().parent().next().slideToggle(30), but when I add the '.build_files_toggle' it doesn't work... and it's killing me. I even tried $(this).parent().parent().next().children('.build_files_toggle').slideToggle(30); But no luck! Any idea here would be great.

Hell even a really good tutorial on all the jquery selectors would be nice!

  $(".build_files_toggle").click(function()
  {
   $(this).parent().parent().next('.build_files_toggle').slideToggle(30);

  });

 <div class="buildGroup" id="RecentBuilds">
  <table>
   <tr>
    <th> 
     Build Date
    </th>
    <th>
     Built By
    </th>     
   </tr>
   <tr>
    <td>
     Aug 22nd 3:11 pm
    </td>     
    <td>
     <a href="#"  class="build_files_toggle" >View</a>
    </td>     
   </tr>
   <tr>
    <td colspan="2">
     <div id="build_files1" class="infoBox_build_files">
      This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text.
     </div>
    </td>
   </tr>
  </table>

Answer 1

There are many ways to skin this cat. Here is one suggestion:

$("a.build_files_toggle").click(function() {
  $("#build_files1").slideToggle(30);
});

Note: "build_files1" is an ID not a class. You can do it with the other class:

$("a.build_files_toggle").click(function() {
  $(this).parents("div.buildGroup:first").find("div.infoBox_build_files").slideToggle(30);
});

but there's no reason not to do this specific example with the ID.

I will also suggest you use a tag name in your selector where possible rather than just a naked class selector (ie "div.buildGroup" instead of ".buildGroup". It's typically much, much faster (depending on browser).

Answer 2

Shouldn't it be

.children('.infoBox_build_files')

Complete version:

$("a.build_files_toggle").click(function() {
  $(this).closest("tr").next().find("div.infoBox_build_files").slideToggle(30);
});

Answer 3

Since you have a class on an element in the row you want, you could just do:

$('.build_files_toggle').click( function() {
  $('.infoBox_build_files').parents('tr').toggle();
} );

Answer 4

Try this:

$(".build_files_toggle").click
(
  function()
  {
    $(this)
      .parents("tr:first")
      .next()
      .find(".infoBox_build_files")
      .slideToggle(500);
  }
);

I think you mean to toggle the .infoBox_build_files DIV as opposed to .build_files_toggle.

I tried this on my machine in IE 7 and it worked fine. Two points though: (1) add an explicit width to both the table and table columns. If you don't, the disappearing act made by the slideToggle function will be noticable. (2) 30 milliseconds for a slideToggle is perhaps too fast. Try a larger interval, like 500 in the example above.

I also recommend that you use the parents() function as opposed to parent(). The former collects ancestors of the wrapped set, and by providing the selector "tr:first" you can zero in on the first table row parent of the element in context. This allows you to "forget" what your markup looks like, and to concentrate on the task at hand a bit more effectively.