jQuery slideToggle a table div

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>

jonatecAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Albert Van HalenAnalyst developerCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Steve KrileCommented:
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
Albert Van HalenAnalyst developerCommented:
@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 Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

jonatecAuthor Commented:
skrile ~ I tried $(this).parent().next().children(".divAdd").slideToggle();

Sorry, doesn't work.
0
jonatecAuthor Commented:
Thanks, works fine. Although I'm still trying to get my head around the use of the comma $(".divAdd",
0
Steve KrileCommented:
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
jonatecAuthor Commented:
skrile ~ yes apologies; that last code block does work, cheers.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.