?
Solved

jQuery slideToggle a table div

Posted on 2010-04-07
7
Medium Priority
?
1,065 Views
Last Modified: 2013-11-11
Ref my included html, how do I using jQuery slideToggle the div tag according to the row button clicked?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    .btnTog
    {
      cursor: hand;
    }
    .divAdd
    {
          font-weight:bold;
          color: Blue;
    }
  </style>

  <script type="text/javascript" src="script/jquery-1.4.2.js"></script>

  <script type="text/javascript">

    $(function() {

      $("tbody .btnTog").click(function(e) {


      });

    });
  </script>

</head>
<body style="font-size: 11px">
  <table border="1" cellpadding="2" cellspacing="2">
    <thead>
      <tr>
        <th>
        </th>
        <th>
          Column 2
        </th>
        <th>
          Column 3
        </th>
        <th>
          Column 4
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td valign="top">
          <button class="btnTog">
            X
          </button>
        </td>
        <td>
          Mr Harry Smith
          <div class="divAdd">
            <br />
            10 Bath Road<br />
            Old Town<br />
            Swindon<br />
            SN1 2EN
          </div>
        </td>
        <td valign="top">
          XXXXXXXXXXXXXXX
        </td>
        <td valign="top">
          YYYYYYYYYYYYYYY
        </td>
      </tr>
      <tr>
        <td valign="top">
          <button class="btnTog">
            X
          </button>
        </td>
        <td>
          Mr Fred Smith
          <div class="divAdd">
            <br />
            10 Bath Road<br />
            Old Town<br />
            Swindon<br />
            SN1 2EN
          </div>
        </td>
        <td valign="top">
          XXXXXXXXXXXXXXX
        </td>
        <td valign="top">
          YYYYYYYYYYYYYYY
        </td>
      </tr>
      <tr>
        <td valign="top">
          <button class="btnTog">
            X
          </button>
        </td>
        <td>
          Mr Fortisgue Smith
          <div class="divAdd">
            <br />
            10 Bath Road<br />
            Old Town<br />
            Swindon<br />
            SN1 2EN
          </div>
        </td>
        <td valign="top">
          XXXXXXXXXXXXXXX
        </td>
        <td valign="top">
          YYYYYYYYYYYYYYY
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

0
Comment
Question by:jonatec
  • 3
  • 2
  • 2
7 Comments
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 2000 total points
ID: 30045673
Use this
$(function() {
	$(".btnTog").click(function(e) {
		// Finding the div in the context of the next table cell from the button
		$(".divAdd", $(this).parent().next()).slideToggle();
	});
});

Open in new window

0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 30079240
Albert - that was very interesting.  I have never understood jquery selectors to allow you to specify context that way.  According to the jquery site, putting a comma between selectors (at least to my reading) SHOULD NOT result in a *AND* logical structure - and yet the example you give here works!

http://api.jquery.com/multiple-selector/

So, maybe I am misunderstanding.  You are not using the comma as an "OR", but rather a $([selector], [context]) structure...correct?  If that's the case, I've never seen that in the wild before.  Very cool.

By the way, I would have been tempted to do something like this

$(this).parent().next().children(".divAdd").slideToggle();

Less elegant, but gets the job done.
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 30090249
@skrile : note that the comma is not in between the quotes thus doesn't belong to the selector but is the context for the selector. So yes, you understand ;-)
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 

Author Comment

by:jonatec
ID: 30096806
skrile ~ I tried $(this).parent().next().children(".divAdd").slideToggle();

Sorry, doesn't work.
0
 

Author Closing Comment

by:jonatec
ID: 31711862
Thanks, works fine. Although I'm still trying to get my head around the use of the comma $(".divAdd",
0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 30109076
It does work.  I tried it.  Did you put it in the context of the button click event?
$(function() {
        $(".btnTog").click(function(e) {
             $(this).parent().next().children(".divAdd").slideToggle(); 
        });
});

Open in new window

0
 

Author Comment

by:jonatec
ID: 30110416
skrile ~ yes apologies; that last code block does work, cheers.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

589 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question