Toggling effect

Rails
1

Hi all,

I have a list of links in a page,i have toggling effect associated with
them
<%= link_to_function("#{article.title}", nil ) do |page|
page.visual_effect :toggle_blind, “article_content_#{article.id}”
end %>
The Number of links is dynamic.
Now if i click on link1 the div associated with it(article_content_1) is
toggled and shown.
Now,like if i click on any other link,the first link which i had clicked
before should close .So whenever i click any link,only the div
associated with it should be shown,and in case if there are any other
divs associated with anyotehr link is shown,they should get hidden.

Kindly suggest me some ways.

Thanks in Advance

Charanya

2

Quoting Charanya N. [email protected]:

Now,like if i click on any other link,the first link which i had clicked
before should close .So whenever i click any link,only the div
associated with it should be shown,and in case if there are any other
divs associated with anyotehr link is shown,they should get hidden.

Kindly suggest me some ways.

With Prototype, custom Javascript and CSS. The follow code adds and
removes
the selected_feed class name as feeds are clicked. The CSS just move
the
highlights. Yours could change the display property.

Hope This Helps,
Jeffrey

CSS:
.selected_feed { color: white; background-color: #88C; }
.selected_feed a { color: white; }

HTML & Javascript:

<%= stylesheet_link_tag 'three_pane.css' %> <%= javascript_include_tag 'prototype' %> <% javascript_tag do %> function ftn(id, url) { parent.$('articles').src = url; $$('.selected_feed').invoke('removeClassName', 'selected_feed'); $(id).addClassName('selected_feed'); return false; } <% end %>
3

I believe you should queue your divs to hide/show them. In case it
helps this is something I have tested and am planning to use in one of
my applications. It needs a lot of work to make it better and DRYer
but it still does the work I need it to do. It is all based on the
model errors but I think it could give you an idea about the queuing
of the effects. I hope it helps.

view:



<%= link_to_function get_tab_link(‘first_link’),
get_tab_effects(‘first_link’) -%>
<%= link_to_function get_tab_link(‘second_link’),
get_tab_effects(‘second_link’) -%>
<%= link_to_function get_tab_link(‘third_link’),
get_tab_effects(‘third_link’) -%>
…

…

…
        <div id="first_link" <%= display?('first_link') -%>>
          <div id="section">
            <%= render :partial => 'first_link' %>
          </div>
        </div>

        <div id="second_link" <%= display?('second_link') -%>>
          <div id="section">
            <%= render :partial => 'second_link' %>
          </div>
        </div>

        <div id="third_link" <%= display?('third_link') -%>>
          <div id="section">
            <%= render :partial => 'third_link' %>
          </div>
        </div>

        ...
      </div> <!-- sections -->

helper:

def get_tab_link(section)
‘

’ + section.capitalize + ‘’
end

def get_tab_effects(section)
case section
when ‘first_link’
“new Effect.Fade(‘second_link’, {duration:0.1});
new Effect.Fade(‘third_link’, {duration:0.1,
queue: ‘end’});
new Effect.Appear(‘first_link’, {duration:0.1, queue:
‘end’});”
when ‘second_link’
“new Effect.Fade(‘first_link’, {duration:0.1});
new Effect.Fade(‘third_link’, {duration:0.1, queue:
‘end’});
new Effect.Appear(‘second_link’, {duration:0.1, queue:
‘end’});”
when ‘third_link’
“new Effect.Fade(‘first_link’, {duration:0.1});
new Effect.Fade(‘second_link’, {duration:0.1, queue:
‘end’});
new Effect.Appear(‘third_link’, {duration:0.1, queue: ‘end’});”
…
end

def display?(section)
case section
when ‘first_link’
return nil if @my_model.errors.empty? or errors_on? section
when ‘second_link’
return nil if errors_on? section unless errors_on? ‘first_link’
when ‘third_link’
return nil if errors_on? section unless (errors_on?
(‘first_link’) || errors_on?(‘second_link’))
…
end

# Default to not display section
'style = "display:none"'

end