So I’m writing a web application for my company that is meant to aide programmers in modifying the time they claim to have spent on particular bugs assigned to them by their team leader or supervisor. I want to make this as user-friendly as possible, since the FogBugz site (if any of you are familiar with it) already has a method of logging time on assigned bugs, though my boss isn’t a big fan of the UI for it. Anyway, I am using the jQuery Tabs functionality to have multiple ways to enter time, and one tab simply shows a table of all of the bugs currently assigned to a user, displaying the bug ID, Status, Title, etc. I would like to try to use the jQuery Accordion to allow the user to click on a table row (or bug, as it were) and have a new container drown below it that lists the possible modifications which can be made (add time interval, remove time interval, edit time interval, etc).
I can see how to use both widgets separately just fine (more or less), but is it possible to make an entire table row (<tr></tr>) into a header for the accordion?
<!DOCTYPE html>
<html>
<head>
<title>Time Modification</title>
<link rel="stylesheet" type="text/css" href="styles/fogbugz.css" />
<link rel="stylesheet" type="text/css" href="styles/jquery.ui.cs" />
<style>
body { font-family: arial; margin: 10px; }
table { border-collapse: separate; }
.hours { text-align: right; }
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.min.js"></script>
<script type="text/javascript">
$ (function() {
$ ("#tabs").tabs();
}
</script>
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tab1">Tab One</a></li>
<li><a href="#tab2">Tab Two</a></li>
<li><a href="#tab3">Tab Three</a></li>
</ul>
<div id="tab1">
<table id="allBugs" width="100%" cellpadding="0" cellspacing="0">
<tr class="headingRow">
<th>Case #</th>
<th>Status</th>
<th>Description</th>
<th>Project</th>
<th>Area</th>
<th>Division</th>
<th>Hours</th>
</tr>
<tr>
<!-- I want to make this row, and others like it, an accordion header -->
<td>123456</td>
<td>Active</td>
<td>This is a bug description...</td>
<td>Lighthouse</td>
<td>Web Applications</td>
<td>Software Development</td>
<td>12.5</th>
</tr>
<!-- More Bug Rows Would Go Here! -->
</table>
</div>
<div id="tab2"></div>
<div id="tab3"></div>
</div>
</body>
</html>
