# How Toggle Show/Hide Button Image and Action?

**URL:** <https://www.ruby-forum.com/t/how-toggle-show-hide-button-image-and-action/134674>\
**Category:** Rails\
**Created:** [April 13, 2008, 9:09pm UTC](https://www.ruby-forum.com/t/how-toggle-show-hide-button-image-and-action/134674 "2008-04-13T21:09:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![S-gw](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/ed655f/32.png) [@S-gw](https://www.ruby-forum.com/u/S-gw)\
**Post date:** [April 13, 2008, 9:09pm UTC](https://www.ruby-forum.com/t/how-toggle-show-hide-button-image-and-action/134674/1 "2008-04-13T21:09:41Z")

</div>

Rails 1.2.6

I have a link\_to\_remote which uses graphic button for the display.

\<%=  
link\_to\_remote ‘ ![](https://www.ruby-forum.com/controls/btn_narrativeHidden.gif)’,  
:url =\> {:controller =\> ‘narrative’, :action =\> ‘show’}  
%\>

When that button is clicked, an RJS file adds content to a div and  
reveals it.

At the same time, I want that initial button to change. Essentially what  
my brain wants is for the whole link\_to\_remote code to change to this

\<%=  
link\_to\_remote ‘ ![](https://www.ruby-forum.com/controls/btn_narrativeShown.gif)’,  
:url =\> {:controller =\> ‘narrative’, :action =\> ‘hide’}  
%\>

So, when the button is clicked, its picture & its action both “toggle”

I can’t figure out how to do that and the best way to architect the  
pieces.

I’m just getting started with using Ajax/RJS, and so far my RJS file is  
bare bones basics:

page.insert\_html :top, ‘narrative’, “example text to insert”  
page.visual\_effect :blind\_down, ‘narrative’, :duration =\> 0.5

What would the RJS be to replace/modify that link\_to\_remote code ?

Any clues appreciated.

– gw

---

<div class="post-metadata">

**Author:** ![S-gw](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/ed655f/32.png) [@S-gw](https://www.ruby-forum.com/u/S-gw)\
**Post date:** [April 13, 2008, 10:47pm UTC](https://www.ruby-forum.com/t/how-toggle-show-hide-button-image-and-action/134674/2 "2008-04-13T22:47:17Z")

</div>

GW: take a peek at the link\_to\_remote API:  
[http://api.rubyonrails.com/classes/ActionView/Helpers/PrototypeHelper.html#M000958](http://api.rubyonrails.com/classes/ActionView/Helpers/PrototypeHelper.html#M000958)

In particular, notice the additional paramters  
like :before, :after, :complete, etc.

Use those to call some javascript code to either replace the image or  
to do a hide/show. In my code, I have something like:

Element.toggle(‘custom\_submit\_tag’, ‘upload\_progress’);

and then the end of the form is:

\<%= image\_tag "progress\_bar.gif" %\>

\<%= custom\_submit\_tag 'Save' %\>

Perhaps just stack the two images right after each other, hide one  
with the style display:none trick then toggle the shown and hidden  
images on the :before hook.

-Danimal

On Apr 13, 1:09 pm, Greg W. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)