Menu
I have the following code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".Note").click(function(){
$(this).parent().parent().next(".divNote").slideToggle();
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="Note" style="cursor: pointer">
<font size="3" color="#800080"><b><u>TD</u></b> </font>
</td>
</tr>
</table>
<br />
<div style="display: none" class="divNote">
</div>
</body>
</html>
I can figure out why it is not working.
example: Here
Any help.
302
You've added a filter to next() function that filters out only matching elements. In your case it only contained one element (br) which didn't have the matching class name, so the resulting set was truncated to zero elements.
So instead of simply filtering next element you have to filter out from all siblings:
$(document).ready(function() {
$(".Note").click(function(){
$(this).parents("table").siblings(".divNote").slideToggle();
});
});
or filter out from all next siblings (when previous siblings aren't relevant at all)
$(document).ready(function() {
$(".Note").click(function(){
$(this).parents("table").nextAll(".divNote").slideToggle();
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
