Also, instead of writing a different jQuery command for each thing you
want to hide, if you write the html consistently, which it looks like
you are doing through loops, then you can do something like:
$('tr.task_header').next().click( function() {
$(this).toggle();
}
Which isn't the exact code for what you wrote but illustrates a
different way to go about it. In this above it looks for every DOM
element with the class name of task_header and adds a click event so
that it hides/shows the next sibling DOM element. So, just define a
starting points (tr.task_header in this example), then navigate to the
element you want acted on, and then act on it. Makes it very simple
to do a whole bunch of these.
On Jan 10, 2:55 pm, mark <aussi...@gmail.com> wrote:
> You were spot on. Thanks for your help!
>
> On Jan 11, 8:17 am, "cherry.aus...@gmail.com"
>
> <cherry.aus...@gmail.com> wrote:
> > Hi. I confess I didn't read your code very thoroughly, but it looks
> > like it might be as simple as repeated IDs. You can only have one
> > instance of each ID per page. Try changing it to a class (or adding an
> > iterator to each ID).
>
> > Sorry if this isn't the right answer?
> > Cherry.
>
> > On Jan 10, 1:06 pm, mark <aussi...@gmail.com> wrote:
>
> > > 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 %>
