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 %>