# Toggle

**URL:** <https://www.ruby-forum.com/t/toggle/152398>\
**Category:** Rails\
**Created:** [November 3, 2008, 3:52pm UTC](https://www.ruby-forum.com/t/toggle/152398 "2008-11-03T15:52:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mikael](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/f04885/32.png) [@mikael](https://www.ruby-forum.com/u/mikael)\
**Post date:** [November 3, 2008, 3:52pm UTC](https://www.ruby-forum.com/t/toggle/152398/1 "2008-11-03T15:52:24Z")

</div>

Hi!

I’am using Effect.toggle to show/hide a div field. Is there a simple way  
to also toggle the icon i am using. (+ if hidden and - if visible)

\<%= link\_to\_function ‘’,  
“Effect.toggle(‘summary\_dropdown’)”,  
:class =\> ‘icon-expand’ %\>

Thanks.

---

<div class="post-metadata">

**Author:** ![mikael](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/f04885/32.png) [@mikael](https://www.ruby-forum.com/u/mikael)\
**Post date:** [November 3, 2008, 4:03pm UTC](https://www.ruby-forum.com/t/toggle/152398/2 "2008-11-03T16:03:46Z")

</div>

On 3 Nov 2008, at 14:52, Mikael Björkegren wrote:

> Hi!
> 
> I’am using Effect.toggle to show/hide a div field. Is there a simple  
> way  
> to also toggle the icon i am using. (+ if hidden and - if visible)

I typically do that by also toggling some css class (eg $  
(‘something’).toggleClassName(‘expanded’). in this case you can  
probably do this.toggleClassName(‘some-class’) )

Fred

---

<div class="post-metadata">

**Author:** ![mikael](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/f04885/32.png) [@mikael](https://www.ruby-forum.com/u/mikael)\
**Post date:** [November 4, 2008, 10:02am UTC](https://www.ruby-forum.com/t/toggle/152398/3 "2008-11-04T10:02:25Z")

</div>

Thanks for the quick reply. But where am i going to put this?

> I typically do that by also toggling some css class (eg $  
> (‘something’).toggleClassName(‘expanded’). in this case you can  
> probably do this.toggleClassName(‘some-class’) )
> 
> Fred

\<%= link\_to\_function ‘’,  
“Effect.toggle(‘summary\_dropdown’)”,  
:id =\> ‘toggle’,  
:class =\> ‘icon-expand’ %\>

I guess it should be someting like  
(‘toggle’).toggleClassName(‘icon-fade’)

but where will i put this in my link\_to\_function ?

---

<div class="post-metadata">

**Author:** ![mikael](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/f04885/32.png) [@mikael](https://www.ruby-forum.com/u/mikael)\
**Post date:** [November 4, 2008, 3:19pm UTC](https://www.ruby-forum.com/t/toggle/152398/4 "2008-11-04T15:19:44Z")

</div>

On 4 Nov 2008, at 09:02, Mikael Björkegren wrote:

> “Effect.toggle(‘summary\_dropdown’)”,  
> :id =\> ‘toggle’,  
> :class =\> ‘icon-expand’ %\>
> 
> I guess it should be someting like  
> (‘toggle’).toggleClassName(‘icon-fade’)
> 
> but where will i put this in my link\_to\_function ?

the second argument to link\_to\_function is an arbitrary javascript  
fragment. You can put as much in there as you want.

Fred

---

<div class="post-metadata">

**Author:** ![mikael](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/f04885/32.png) [@mikael](https://www.ruby-forum.com/u/mikael)\
**Post date:** [November 4, 2008, 3:57pm UTC](https://www.ruby-forum.com/t/toggle/152398/5 "2008-11-04T15:57:48Z")

</div>

Frederick C. wrote:

> the second argument to link\_to\_function is an arbitrary javascript  
> fragment. You can put as much in there as you want.
> 
> Fred

To give just a little more detail to what Fred said, you can do  
something like

“Effect.toggle(‘this-thing’); Effect.toggle(‘that-thing’);”

Just remember that needs to be proper JavaScript since it’s going to be  
eval’d.

Peace.

---

<div class="post-metadata">

**Author:** ![mikael](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/f04885/32.png) [@mikael](https://www.ruby-forum.com/u/mikael)\
**Post date:** [November 4, 2008, 4:59pm UTC](https://www.ruby-forum.com/t/toggle/152398/6 "2008-11-04T16:59:39Z")

</div>

Got it working thanks for the reply.

---

<div class="post-metadata">

**Author:** ![mikael](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/f04885/32.png) [@mikael](https://www.ruby-forum.com/u/mikael)\
**Post date:** [November 4, 2008, 3:03pm UTC](https://www.ruby-forum.com/t/toggle/152398/7 "2008-11-04T15:03:06Z")

</div>

I can only get one off them to work at a time. Do anyone know  
how to combine the two functions. So the div will fade/appear and  
the icon will change from + to -.