I have a stack of <div> elements that show a name. I'd like to include a + link off to the side of each <div> that, when clicked, expands the <div> and adds more detailed information (from a RoR controller).
After poking around on the net, I found link_to_remote and related RoR stuff, but I can't seem to get the right combination to work together. Can someone point me to a tutorial or show what the controller and view interaction should look like?
Thanks!
You can do this really easily with Javascript in the example below:
<html> <head> <title>Text Page</title> <script language="Javascript"> function toggleDiv(divid) { if (document.getElementById(divid).style.visibility == 'hidden') { document.getElementById(divid).style.visibility = 'visible'; } else { document.getElementById(divid).style.visibility = 'hidden'; } } </script> </head> <body> <span onClick="toggleDiv('div1');" style="cursor:pointer;">+</span> <div id="div1" style="visibility:hidden;">This is DIV 1</div> <span onClick="toggleDiv('div2');" style="cursor:pointer;">+</span> <div id="div2" style="visibility:hidden;">This is DIV 2</div> </body> </html>
If you set the initial visibility of the DIV's to hidden, you can use the toggleDiv function shown above to toggle the visibility of any DIV given the ID. You will probably need to tweak the style definitions for the DIVs to display next to the plus signs (put them in adjacent <TD>'s in a table for example), but I figured I'd keep it simple.
Good Luck.