Unobtrusive Toggling in a Loop

Question

Hi everyone,

I'm using Unobtrusive Toggling in a view that contains many records (Orders). I've got it working on individual divs, but I now want it to work so each Order can be expanded/contracted individually within the loop using its own toggle link (the link is also looped).

When my expandable div is called x, the problem is every loop of the toggle button just toggles the first div instead of the div in its own iteration - I imagine the best way is to use the order_id for the identifier of each expandable section?

More experienced viewers might laugh at this :) but I tried playing around with code such as:

<% for order in @orders do %>

# toggle
<a class="toggle" href="#<%= order.id %>" rel="toggle[<%= order.id %>]">Toggle</a>

# expandable div with its own nested toggle
<div id="<%= order.id %>" class="expand_me">
    # nested toggle inside the looping expandable div
    <a class="toggle" href="?" rel="toggle[?]">Toggle</a>
    <div id="?" class="expand_me">
    ...
    </div>
</div>

<% end %>

As you can see, within each of these loops there are some sub-sections I'd like to be able to toggle as well. How would the solution change if I have to be able to toggle multiple divs WITHIN the expandable looped div? The ?s are because if I refer to the main toggle div as order.id then I don't know how to refer to multiple internal divs - this is obviously pursuant to the main problem.

Answer 1

Have you looked into a JavaScript library such as Jquery for doing this? You should be able to do this without needing to add any special classes or IDs. If the <a> link is just to toggle the proceeding <div>, then you can just have the JavaScript move to the next element in the DOM.