# Toggling effect

**URL:** <https://www.ruby-forum.com/t/toggling-effect/182815>\
**Category:** Rails\
**Created:** [February 3, 2010, 7:41am UTC](https://www.ruby-forum.com/t/toggling-effect/182815 "2010-02-03T07:41:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![charanya](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/b5e925/32.png) [@charanya](https://www.ruby-forum.com/u/charanya)\
**Post date:** [February 3, 2010, 7:41am UTC](https://www.ruby-forum.com/t/toggling-effect/182815/1 "2010-02-03T07:41:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![charanya](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/b5e925/32.png) [@charanya](https://www.ruby-forum.com/u/charanya)\
**Post date:** [February 3, 2010, 9:40am UTC](https://www.ruby-forum.com/t/toggling-effect/182815/2 "2010-02-03T09:40:27Z")

</div>

Quoting Charanya N. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid):

> 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 %\> 
 \<% feeds.each do |feed| %\> - \<%- sub\_id = dom\_id(feed) -%\> \<%- count = counts[feed[:id]] -%\> \<%= (count \<= 0) ? feed.title : "**#{feed.title}&nbsp;(#{count})**" %\> 
 \<% end %\>

---

<div class="post-metadata">

**Author:** ![charanya](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/b5e925/32.png) [@charanya](https://www.ruby-forum.com/u/charanya)\
**Post date:** [February 5, 2010, 4:04am UTC](https://www.ruby-forum.com/t/toggling-effect/182815/3 "2010-02-05T04:04:33Z")

</div>

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