[jQuery] Show/Hide Toggle Table
Hey Guys, I'm new to jquery, and haven't much experience with
javascript. I'm trying to toggle a few rows on a table with a show/
hide. Is this possible with a table or do I need to rewrite my view
using divs?
<script language=javascript type='text/javascript'>
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$('#slickbox').hide();
// toggles the slickbox on clicking the noted link
$('a#slick-toggle').click(function() {
$('#slickbox').toggle(250);
return false;
});
});
</script>
<table>
<tr>
<th width="80%">Description</th>
<th width="10%">Business value</th>
<th width="10%">Story points</th>
</tr>
<% for story in @stories %>
<tr class="story_<%= cycle("even", "odd") -%>">
<td>
<a href="#" id="slick-toggle">[+]</a>
<%=h story.description %>
</td>
<td><%=h story.business_value %></td>
<td><%=h story.story_points %></td>
<td class="admin_options"><%= link_to 'Show', story %></td>
<td class="admin_options"><%= link_to 'Edit', edit_story_path
(story) %></td>
<td class="admin_options"><%= link_to 'Destroy', story, :confirm
=> 'Are you sure?', :method => :delete %></td>
</tr>
<div id="slickbox">
<% if story.tasks.count > 0 %>
<tr class="task_header">
<th width="80%">Task</th>
<th width="10%">Assigned User</th>
<th width="10%">Rem. Time</th>
</tr>
<% for task in story.tasks %>
<tr class="task_<%= cycle("even", "odd") -%>">
<td> <%=h task.task %> </td>
<td> <%=h task.user_id %> </td>
<td> <%=h humanize_time( Task.calculate_remaining_time_on_task
( task.id ) ) %> </td>
</tr>
<% end %>
<tr class="total_hours_remaining">
<td> </td>
<td>Remaining:</td>
<td><%= humanize_time( Task.calculate_remaining_time_on_story
( story.id ) ) %></td>
</tr>
<% end %>
</div>
<% end %>
</table>
<br />
<%= link_to 'New story', new_story_path %>