Topic: how to collapse all with a toggle

Hey all,

I have a loop that kind of looks like this:

<% for  item in @items %>
<span id='showbox_<% item_id%>' style="display:none" ><% item.id %></span>
<%= link_to_remote 'show other ids', :url=>{:action=>showall} %><br>
<%end%>

What I want to do is when "show other ids" is clicked, the content of each span is showed (eg. with a toggle) except for  the span that goes with the link that's been clicked.
any idea how to do this?

Thanx in advance

Pat

Update:  what would be the link_to_function equivalent to document.getElementsByClassName('myClass').each(Effect.toggle) ? I think that would solve part of my problem.

Last edited by patcito (2007-01-12 14:31:35)

Re: how to collapse all with a toggle

This will do the trick:

Let's assume that you have a fruits table, where for simplicity a fruit has an id and a name. This table you present to your users with the following view:

<% for fruit in @fruits %>
    <span id="fruit_<%= fruit.id -%>" style="display: none;">
        <%= fruit.name -%>
    </span>
    <%= link_to_remote 'show others', :url => { :action => :show_others, :id => fruit }%>
    <br />
<% end %>

I'm further assuming that you've generated a fruits_controller in which we define the show_others action. This action retrieves all the fruits from the database and sets the fruit that will be hidden:

  def show_others
    @fruits = Fruit.find_all
    @fruit_to_hide = Fruit.find(params[:id])
  end

Finally, and this is where the action happens, we define an RJS template app/view/fruits/show_others.rjs. Here we make visible all fruits except the one to hide:

for fruit in @fruits
  if fruit == @fruit_to_hide
    page.hide("fruit_#{fruit.id}")
  else
    page.show("fruit_#{fruit.id}")
  end
end

Hope this helps!

Last edited by philipp13 (2007-01-17 18:20:08)