CODEWITHSUNDEEP
jquery
Jeff
Jeff

Reputation:

Using jQuery to toggle DIV in next row

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>

Upvotes: 0

Views: 999

Answers (4)

David Andres
David Andres

Reputation: 31781

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.

Upvotes: 0

cletus
cletus

Reputation: 625237

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).

Upvotes: 0

rfunduk
rfunduk

Reputation: 30442

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();
} );

Upvotes: 0

meder omuraliev
meder omuraliev

Reputation: 186662

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);
});

Upvotes: 1

Related Questions