togglable comment box

togglable.html

<a href="javascript:void(0)" class="toggleLink" data-mid="<%= message.id %>">Link to my partial</a>

<div id="add_comment<%=message.id%>" style="display:none">
Comment box
</div>

togglable.js

$(function(){

   // notice the hash(#) and dot(.) before the elements? A hash represents an HTML ID and a 
   // dot represents an HTML class. I made the link have a class, and the toggle_div an ID 
   // but you may use whatever you'd like, just make sure if you're referencing an ID that you put
   // a hash(#) before it and if you're referencing a class, make sure you put a dot(.) before it.


   // this javascript should also be in your application.js, or some other JS file. The whole reason link_to_remote and 
   // those other "remote" tags were deprecated is to maintain unobtrusive javascript (take the JS out of the views).
   // this makes for cleaner, separated, more modular code.


	$('.toggleLink').click(function(){
		var mid = this.getAttribute('data-mid');
		$('#add_comment'+mid).toggle();
    });
});