Toggle

rubyonrails-talk
1

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.

2

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

3

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 ?

4

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 -.

5

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 ?

the second argument to link_to_function is an arbitrary javascript
fragment. You can put as much in there as you want.

Fred

6

Frederick Cheung 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.

7

Got it working thanks for the reply.