how to use same script on all locations i need?
<html>
<head>
<style type="text/css">
div.panel
{
height:20px;
display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").click(function(){
$(".panel").toggle();
});
});
</script>
</head>
<body>
<TABLE border="1">
<TR>
<开发者_JAVA技巧;TD>to see whats hidden under here press to image</TD>
<TD>IMG SRC=".jpg" WIDTH="20" HEIGHT="20" BORDER="0" ALT=""</TD>
</TR>
</TABLE>
<div class="panel"><p>Haa haa, nothin</p></div>
<TABLE border="1">
<TR>
<TD>wanna see what under here?</TD>
<TD>IMG SRC=".jpg" WIDTH="20" HEIGHT="20" BORDER="0" ALT=""</TD>
</TR>
</TABLE>
<div class="panel"><p>treasure from bottom of ocean</p></div>
</body>
</html>
Porblem is, when i press first or second image i see the first thing thats hidden and second thing thats hidden. I want to make so that when i press first image i see only what hidden under there and i can toggle it, not just show and never hide again.
Try:
$(document).ready(function(){
$("img").click(function(){
$(this).closest('table').next(".panel").toggle();
});
});
精彩评论