jonatec
asked on
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.j s"></scrip t>
<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>
<!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.j
<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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
@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 ;-)
ASKER
skrile ~ I tried $(this).parent().next().ch ildren(".d ivAdd").sl ideToggle( );
Sorry, doesn't work.
Sorry, doesn't work.
ASKER
Thanks, works fine. Although I'm still trying to get my head around the use of the comma $(".divAdd",
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();
});
});
ASKER
skrile ~ yes apologies; that last code block does work, cheers.
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().ch
Less elegant, but gets the job done.