Fold/unfold div in table?
A few days ago, I asked a question regarding folding div ([link text][fold-unfold div]). The answers I got allowed me to make good progress in my coding effort. However, my requirements have changed.
Being a newbie with all this web stuff, I though that wrapping the divs with a table and table headers would be easy. Boy, was I wrong.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Animate my Div</title>
<开发者_开发技巧;style type="text/css" media="screen">
a {text-decoration: none; color: black; }
#expand {background-color: #fff;}
.description {display: none; }
.entry {margin: 0; padding: 0px;}
</style>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".entry a").click(function() {
$(this).parents('.entry').find('.description').slideToggle(1000);
});
});
</script>
</head>
<body>
<?php
$con = mysql_connect("korg", "joe", "bob");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("wfr11", $con);
$result = mysql_query("
select title,description from webcases");
?>
<table border="1">
<thead>
<tr>
<th>title</th>
</tr>
</thead>
<?php
while ($row = mysql_fetch_array($result)) {
?><div class="entry"><tr>
<td>
<a href="#expand"><?php echo htmlentities($row['title']); ?></a>
<div class="description"><?php echo htmlentities($row['description']); ?></div>
</td>
</tr></div>
<?php
}
mysql_close($con);
?>
</table>
</body>
</html>
Now, a click on a ticket title does not work. I remove all the code for the table, it works fine: click on a title and the description unfolds
I should be able to fold my div (expand & description) into my table, right? What am I missing?
Chris, have a look here: http://jsfiddle.net/neopreneur/kdFHP/
Your HTML needs to look like this:
<table border="1">
<thead>
<tr>
<th>title</th>
</tr>
</thead>
<tbody>
<tr>
<td class="entry">
<a href="#expand">Title Text (click here)</a>
<div class="description">Description Text</div>
</td>
</tr>
</tbody>
</table>
加载中,请稍侯......
精彩评论