I'm embarrassed to say that I have not used Javascript in quite a while, but now have to re-familiarize myself with it as I'm learning Ruby and Rails concurrently.

Anyway, here's the code I'm working with:

In application.js:

Code:

function toggle_visible(obj) {
   var el = document.getElementById(obj);
   if ( el.style.display != 'none' ) {
      el.style.display = 'none';
   }
   else {
      el.style.display = '';
   }
}

In the view:

Code:

<div id="short_desc_<%= job.id %>">
  <%= truncate(job.description, 200)  %>
</div>
<div id="long_desc_<%= job.id %>" style="display:none;">
  <%= job.description %>
</div>
<%= link_to_function("Expand", "toggle_visible()") %>

This generates an error in Firebug: "el has no properties - toggle_visible(undefined)"

What is it I'm supposed to pass in this situation (since I'm changing the state of two divs)?

Any help is greatly appreciated.

I don't know anything about ruby(?), but if the following line is producing your onclick handler call,

Code:

<%= link_to_function("Expand", "toggle_visible()") %>

then you may pass some value in the call to match the definition

Code:

function toggle_visible(obj){
var el = document.getElementById(obj);

A co-worker provided this solution using Prototype (a javascript framework):

Code:

<td colspan="3">
  <div id="short_desc_<%= job.id %>">
   <%= truncate(job.description, 200) %>
   <br />
   <%= link_to_function("Expand", "$(this).up('td').childElements().invoke('toggle')") %>
  </div>
  <div id="long_desc_<%= job.id %>" style="display:none;">
   <%= job.description %>
   <br />
   <%= link_to_function("Collapse", "$(this).up('td').childElements().invoke('toggle')") %>
  </div>
</td>

Since it only occurs in this file, it was decided to make it an inline call, rather than include it in the .js file that gets included/loaded with all the pages.