# JS Toggle graphics on action / click

**URL:** <https://www.ruby-forum.com/t/js-toggle-graphics-on-action-click/56192>\
**Category:** Rails\
**Created:** [March 28, 2006, 9:14pm UTC](https://www.ruby-forum.com/t/js-toggle-graphics-on-action-click/56192 "2006-03-28T21:14:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![eyematz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/e/df788c/32.png) [@eyematz](https://www.ruby-forum.com/u/eyematz)\
**Post date:** [March 28, 2006, 9:14pm UTC](https://www.ruby-forum.com/t/js-toggle-graphics-on-action-click/56192/1 "2006-03-28T21:14:34Z")

</div>

I’ve got a simple toggle option (On/Off) in my admin GUI list action. I  
would like to click on this graphic and change the status of the option.

I got the whole thing working in the controller & db through this  
beautiful one-liner

@item = Item.find(params[:id]).toggle!(‘display\_status’)

The thing I can’t achieve - even after several hours of labouring my  
brain cell - is how to update the graphics that I click on, ie swapping  
the On graphics for Off & vice versa.

In what way do I do this with Rails & Prototype ?? I’ve been trying  
multiple options/scenarios to the best of my abilities, but it still  
ain’t working. Any ideas and help, please ?

Regards

eyematz

---

<div class="post-metadata">

**Author:** ![eyematz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/e/df788c/32.png) [@eyematz](https://www.ruby-forum.com/u/eyematz)\
**Post date:** [March 28, 2006, 9:51pm UTC](https://www.ruby-forum.com/t/js-toggle-graphics-on-action-click/56192/2 "2006-03-28T21:51:27Z")

</div>

an inline rjs could do it in two lines with replace\_html

On Tuesday, March 28, 2006, at 9:14 PM, eye matz wrote:

> the On graphics for Off & vice versa.  
> Posted via [http://www.ruby-forum.com/](http://www.ruby-forum.com/).
> 
> * * *
> 
> Rails mailing list  
> removed\_email\_address@domain.invalid  
> [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails)

Mikkel B.

www.strongside.dk - Football Portal(DK)  
[nflfeed.helenius.org](http://nflfeed.helenius.org) - Football News(DK)  
ting.minline.dk - Buy Old Stuff!(DK)

---

<div class="post-metadata">

**Author:** ![eyematz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/e/df788c/32.png) [@eyematz](https://www.ruby-forum.com/u/eyematz)\
**Post date:** [March 28, 2006, 10:27pm UTC](https://www.ruby-forum.com/t/js-toggle-graphics-on-action-click/56192/3 "2006-03-28T22:27:12Z")

</div>

eye matz,  
One easy way is to make the 2 images into one and use CSS to display it  
(see example below). Then create a function in JavaScript that attaches  
an onclick event handler to the class of what ever contains your image.  
The initial display would be “ON” and when clicked the the JavaScript  
would change the style of .toggle\_img to background-position: 0px 20px;  
You’ll also need a counter in the function to switch it back.

.toggle\_img {background: url(…/i/toggle.gif) 0px 10px no-repeat;}

Scott.

eye matz wrote:

> I’ve got a simple toggle option (On/Off) in my admin GUI list action. I  
> would like to click on this graphic and change the status of the option.
> 
> I got the whole thing working in the controller & db through this  
> beautiful one-liner
> 
> @item = Item.find(params[:id]).toggle!(‘display\_status’)
> 
> The thing I can’t achieve - even after several hours of labouring my  
> brain cell - is how to update the graphics that I click on, ie swapping  
> the On graphics for Off & vice versa.
> 
> In what way do I do this with Rails & Prototype ?? I’ve been trying  
> multiple options/scenarios to the best of my abilities, but it still  
> ain’t working. Any ideas and help, please ?
> 
> Regards
> 
> eyematz