Transforming "Show" Link to "Hide" Link When Clicked

Rails
1

I’m trying to incorporate a “Show/Hide” link on a page that uses
Scriptaculous elements (i.e. Effect.toggle). Initially, the the link
says: “Show more” to show more text that’s hidden.

How can I make it such that when the user clicks on that “Show More”
link, it transforms to a “Hide Text” link?

I noticed this article by 37signals is close to two years old:
Implementing stateful links - Signal vs. Noise (by 37signals),
so I don’t know if there’s a more efficient way to do it.

Any ideas?

2

and then just call this function for your two elements (one hidden, one
shown);

<%= link_to ‘open’, {url}, :id => “turtle”, :onclick=>
‘toogle_views(‘turtle’, ‘bird’, ‘block’)’ %>
<%= link_to ‘close’, {url}, :id => “bird”, :style =>‘display:none;’ %>

…this could fit your needs i suppose, but if u want a cleaner way, i’m
sure it will come down the thread by the other suitable people on board:

3

The easiest way is to make sure you can get to the link element. The
easiest way to do this is through and id, however, you can also have
an id on a parent element and then do a “down” from there to the
link. Once you have the link in hand you can replace the inner html.

4

Shai R. wrote:

and then just call this function for your two elements (one hidden, one
shown);

<%= link_to ‘open’, {url}, :id => “turtle”, :onclick=>
‘toogle_views(‘turtle’, ‘bird’, ‘block’)’ %>
<%= link_to ‘close’, {url}, :id => “bird”, :style =>‘display:none;’ %>

…this could fit your needs i suppose, but if u want a cleaner way, i’m
sure it will come down the thread by the other suitable people on board:

Hi Shai,

Thank you so much for that. I tried this, but I can’t seem to figure out
what I’m doing wrong:

Edit
Close

===========

When I click on the link, it remains there without toggling. Do you know
where I’m going wrong?

5

Also, ‘toogle’ should be ‘toggle’

6

Bob S. wrote:

Shai R. wrote:

and then just call this function for your two elements (one hidden, one
shown);

<%= link_to ‘open’, {url}, :id => “turtle”, :onclick=>
‘toogle_views(‘turtle’, ‘bird’, ‘block’)’ %>
<%= link_to ‘close’, {url}, :id => “bird”, :style =>‘display:none;’ %>

…this could fit your needs i suppose, but if u want a cleaner way, i’m
sure it will come down the thread by the other suitable people on board:

Hi Shai,

Thank you so much for that. I tried this, but I can’t seem to figure out
what I’m doing wrong:

Edit
Close

===========

When I click on the link, it remains there without toggling. Do you know
where I’m going wrong?

yea:

the function $(id) is a short notation for a function that is in the
prototype js library - it’s short for

getElementByID

so either replace the $(id) with getEle… or add a
<%= javascript_include_tag :defaults %> to the of the page (which
will add the prototype library to your page, along with the $(id) func.)

…good luck :slight_smile:

7

Shai, thank you so much for the clarification!

Ashley, thanks for the note!